Which Javascript framework would you recommend for dynamically creating DOM Object?

Asked

Viewed 42 times

0

Which JS framework would prompt me to create HTML objects dynamically?

For example: I need to create a "btn-example" class button that references the Google website link (by clicking, open the site). However, I will do this only when a given boolean variable is true. The algorithm for inserting the element into the DOM tree would be:

if ( variavelBooleana ) {
  var botao = document.createElement('input')

  botao.value = 'Google'

  botao.class = 'btn-teste'

  botao.onclick = function () { window.location.href = 'google.com' }

  document.body.appendChild(botao)
}

Disregard mistakes because what I really want is to do this:

if ( variavelBooleana )
  frameworkEspecificoQueFazIsto.addElemento('input',{class: 'btn-teste', value: 'Google', onclick: function () { window.location.href = 'google.com' } })

I hope you have understood and can help me. I thank you in advance.

javascript ecmascript-6

  • I don’t understand why you use a input if the goal is to create a button (and if it is a link, it should be an anchor, <a>, not a button), but anyway, why not just implement this function you want instead of using a framework?

  • I am looking for this framework for a company project in which I work. We have a module that should store a JS string to be used dynamically (I won’t go into detail for professional ethics). I need the framework as soon as possible, because it is not just a simple input or button that we will use, but perhaps an img or form, etc... Understands?

  • Apparently it is easier to "develop" than to "look for something ready".

1 answer

-2


Would jquery not suit you?

var button = $('<input type="button" class="sua_classe_css">').val('nome_do_botao').click(function () {
  window.location.href = 'SEU_LINK';
});

$('body').append(button);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Take a look and see if it meets you friend!

And then there’s the lib zephyte it would be similar to jquery but it’s lighter and doesn’t have everything jquery has, but it seems to suit you! an example of their website:

// create element:
$("<p>Hello</p>") //=> the new P element

// create element with attributes:
$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} })
//=> <p id=greeting style="color:darkblue">Hello</p>

Browser other questions tagged javascript ecmascript-6

You are not signed in. Login or sign up in order to post.