使用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元素