feature request: dynamically append/remove DOM elements in template

As far as I understand, currently, once a vm instance has been created, compiled and mounted, the structure of its template is unchangeable – we can only switch some DOM elements on/off via existing directives like v-show, v-if and v-for (which are already written in the template), but there is no way to dynamically append brand-new elements/child components (which are not written in template in advance) into the template (or into the DOM).

If I am right – sometimes we do need to dynamically twist the template itself, because the way we twist it is determined by user’s random input and cannot be foreseen.

Or there already is a way to achieve this?

[yyx990803]

The idea here is, do you know ahead of time what possible types of content there are? If yes, then everything should be expressed in your templates or render functions, because that keeps your component’s render output declarative and predictable. You don’t have to follow through chains of imperative code to figure out why something is happening.

If you don’t know the content, then you can use v-html with something like:

userContent: ['<div>hi</div>', '<div>bye</div>']

<div v-for="content in userContent" v-html="content"></div>

^ Be careful about XSS though.

[PocketNinjaDesign]

Heyup, I want to be able to do this Codepen Popup Test I’ve asked this of React Developers in Stack Overflow and rather than giving me some sort of direction to go in, they just say, “Noo, you can’t think like jQuery anymore”, Well let me tell you, I’m thinking like Javascript and I want to be able to put any element anywhere on the page I want. There is a nicer version of that script on my site Code is on my Github account

So does this v-html look like it shows promise…?

Thank you in advance Vue type people 😃