使用javascript将HTML附加到DOM

Question

好的，所以我用以下javascript将HTML元素附加到DOM。

$h.each(domNodes, function(domNode) {
  var input;
    input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('id', 'image-file');
    input.setAttribute('name', 'files[]');
    input.style.display = 'none';
    domNode.addEventListener('click', function(){
      input.style.opacity = 0;
      input.style.display='block';
      input.focus();
      input.click();
      input.style.display='none';
    }, false);
    domNode.appendChild(input);
  }
}

这会创建一行看起来像这样的HTML ......

  <input type="file" id="image-file" name="files[]" multiple="multiple" style="display: none;" />

javascript会是什么样子来创建看起来像这样的HTML输出...

 <input type="file" name="files[]" id="image-file" multiple />
 <label class="file-button" for="image-file" >
    <img src="img/upload.png" alt="add"> Upload Your File(s)
 </label>

我不确定如何使用纯javascript在其他HTML标记中嵌套HTML标记，因此非常感谢任何帮助。

Answer 1

您应该首先创建一个DocumentFragment ，然后在将片段插入DOM之前，可以将每个子元素附加到该元素。

var docFragment = document.createDocumentFragment();
var input = document.createElement("input");
var label = document.createElement("label");
var img = document.createElement("img");
docFragment.appendChild(input);
docFragment.appendChild(label);
label.appendChild(img);

var form = document.getElementsByTagName("form")[0];
form.appendChild(docFragment);

DocumentFragments是DOM节点。 它们永远不是主DOM树的一部分。 通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。 在DOM树中，文档片段由其所有子项替换。

由于文档片段在内存中而不是主DOM树的一部分，因此将子项附加到它不会导致页面重排（计算元素的位置和几何）。 因此，使用文档片段通常会带来更好的性能。

Answer 2

将各个元素构造为没有任何内容的dom节点不会改变。 使用appendChild和createTextNode方法组装各个部分，如下所示：

var input, img, label, text;

input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('id', 'image-file');
input.setAttribute('name', 'files[]');
input.setAttribute('multiple', 'multiple');

label = document.createElement('img');
label.setAttribute('class', 'file-button');
label.setAttribute('for', 'image-file');

img = document.createElement('img');
img.setAttribute('src', 'img/upload.png');
img.setAttribute('alt', 'add');

text = document.createTextNode(' Upload Your File(s)');

label.appendChild(img);
label.appendChild(text);
domNode.appendChild(input);
domNode.appendChild(label);

笔记

• 您可能希望将documentFragment容器用于新的DOM部分，请参阅Dave Anderson的回答。

• 如果你可以使用jquery，有一个简单的选择：

-

var htmlfrag = $(
    '<input type="file" name="files[]" id="image-file" multiple />\n'
  + '<label class="file-button" for="image-file" >\n'
  + '    <img src="img/upload.png" alt="add"> Upload Your File(s)\n'
  + '</label>\n'
);

• $.parseHtml()可能更好，而不是$函数，因为它保留了字符串文字中使用的空格。

• 也可以使用json对象设置元素的属性; 这可能是优选的，因为属性集及其值可以以更简单的方式以编程方式编译。

（对Dave Anderson的后两个方面的赞誉）

Answer 3

与上面的相同，除了在将标签附加到domNode之前必须将img元素附加到label元素