使用javascript将HTML附加到DOM中

append HTML to the DOM with javascript

本文关键字：DOM javascript HTML 使用      更新时间：2023-09-26

好的，所以我用下面的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标记中，所以如果有任何帮助，我们将不胜感激。

您应该首先创建一个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的一部分树，将子级附加到树不会导致页面回流（计算元素的位置和几何形状）。因此，使用文档碎片通常会带来更好的性能。

将单个元素构造为没有任何内容的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);

票据

  • 您可能想要为新的DOM部分使用documentFragment容器，请参阅DaveAnderson的回答。

  • 如果你可以使用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的后两个方面）

与上面所做的相同，只是在将标签附加到domNode 之前必须将img元素附加到label元素

相关文章：