17

I want to create a nested tag using javascript createElement function like

<li><span class="toggle">Jan</span></li>

Can anyone give me an idea how to do it?

3 Answers 3

32

The simplest way is with createElement() and then set its innerHTML:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

You can then add it to the document with .appendChild() wherever you want it to go.

7
  • And maybe you should clone() function instead createElement() for every li element.
    – Kerem
    Commented Aug 7, 2012 at 7:17
  • 1
    Why clone()? What advantage does that have over createElement() for this purpose?
    – jfriend00
    Commented Aug 7, 2012 at 7:24
  • If I'm not wrong cloneNode() should has some advantages for memory issues instead creating for every time a new element. In this way, you just referring the tag (which is created first) element and no more mem allocation with creating new elements. var li=createElement("li"), l; l=li.cloneNode(true); l.innerHTML="..."; l.cloneNode(true); l.innerHTML="..."; so on...
    – Kerem
    Commented Aug 7, 2012 at 7:40
  • @qeremy - I've never heard of cloneNode() using less memory. Do you have a reference on that?
    – jfriend00
    Commented Aug 7, 2012 at 7:44
  • I have no reference for it (cos I don't remember where I've seen it) and told at first "if I'm not wrong" :). And simply thinking; var li=document.createElement("li"); Now, I have one var at memory and not pushing-stuffing vars anymore to memory, but just referring to it when I need same thing writing l=li.cloneNode(true) and also overwriting on l every time. I think this must be useful and has advantages. Or writing like this? var li; li=document.createElement("li"); do someth... li=document.createElement("li"); do s...; li=document.createElement("li"); ...
    – Kerem
    Commented Aug 7, 2012 at 8:15
19
var li = document.createElement('li');
var span = document.createElement('span');
span.className = 'toggle';
span.appendChild(document.createTextNode('Jan'));
li.appendChild(span);
0

I have written a function that is suitable for use when we want to convert an nested JSON to html tags.You can change it according to your needs or event convert it to JQuery. I use this to convert a JSON response to html.

let createContentByJson = function (target, obj) {
    const el = document.createElement(obj.tag);
    if (obj.hasOwnProperty('class'))
        el.classList.add(obj.class);
    if (obj.hasOwnProperty('text'))
        el.textContent = obj.text;
    if (obj.hasOwnProperty('id'))
        el.id = obj.id;
    target.append(el);
    if (obj.hasOwnProperty('inner'))
        obj.inner.forEach((inner_el) => {
            createContentByJson(el, inner_el);
        });
};

createContentByJson(document.querySelector('#target'),{
  tag: 'div',
  class: 'parent-div',
  id: 'parent',
  inner:[
    {
      tag: 'p',
      class: 'child-class1',
      text: 'child1'
    },
    {
      tag: 'p',
      class: 'child-class2',
      text: 'chid2'
    }
  ]
});
<div id="target"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.