使用 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;" />

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

 <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

您应该从creating a 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);

备注

• 您可能希望为新的 DOM 部分使用 documentFragment 容器，请参阅 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 元素