如何為 JavaScript 而不是 HTML 創建 HTML 元素

Question

我有這個簡化的代碼：

 const chancesData = ["facebook","twitter","google"]; let inputsArr = []; const inputsArrFill = chancesData.map((cur, index) => { const input = (document.createElement("input").value = chancesData[index]); inputsArr.push(input); //I want the pushed value to be something like this "<input value"facebook">" return inputsArr; //so the returned array (should) be something like this: //["<input value"facebook">","<input value"twitter">","<input value"google">"] }); console.dir(inputsArrFill);

如您所見，如果您在控制台中打開了這個 coed，則返回的數組如下所示：

['facebook', 'twiiter', 'google']

我希望它看起來像這樣：

['<input value="facebook">','<input value="twitter">','<input value="google">']

Answer 1

您可以使用setAttribute將值放入 HTML 標記中，然后使用outerHTML檢索它：

 const chancesData = ["facebook", "twitter", "google"]; const inputsArrFill = chancesData.map(str => { const input = document.createElement("input"); input.setAttribute('value', str); return input.outerHTML; }); console.dir(inputsArrFill);

但是使用普通的字符串連接會更容易：

 const chancesData = ["facebook", "twitter", "google"]; const inputsArrFill = chancesData.map(str => `<input value="${str}">`); console.dir(inputsArrFill);

Answer 2

賦值表達式的結果是賦值。 和

const input = (document.createElement("input").value = chancesData[index]);

您沒有將創建的 HTML 元素的引用存儲到您的變量中，而是存儲了分配的值chancesData[index] 。

您需要在不同的步驟中完成這兩件事。

 const chancesData = ["facebook","twitter","google"]; let inputsArr = []; const inputsArrFill = chancesData.map((cur, index) => { const input = document.createElement("input"); input.value = chancesData[index]; inputsArr.push(input); //I want the pushed value to be something like this "<input value"facebook">" return inputsArr; //so the returned array (should) be something like this: //["<input value"facebook">","<input value"twitter">","<input value"google">"] }); console.dir(inputsArrFill);

但是如果你真的想要<input value="facebook">作為結果，那么你可能必須以字符串形式推送它開始。 你有過怎樣的HTML元素對象被由控制台顯示的小控制。

Answer 3

請參考以下代碼。

 (function createHTMlString() { const chancesData = ["facebook", "twitter", "google"]; var outputObj = [] for (var i = 0; i < chancesData.length; i++) { var inputTag = document.createElement("INPUT"); inputTag.setAttribute("value", chancesData[i]); outputObj.push(inputTag); } console.log(outputObj) })();