每次單擊按鈕時，我都想顯示一個帶有新名稱的新輸入欄位。我該如何實作？我找到了添加輸入的解決方案，但沒有提到為其添加新名稱。
HTML：
<a href="" onclick="addKeywordFields()">Add a keyword</a>
<div id="fieldContainer"></div>
Javascript：
function addKeywordFields() {
var mydiv = document.getElementById("fieldContainer");
mydiv.appendChild(document.createTextNode("<input type='text' name=''>"))
}
uj5u.com熱心網友回復：
您不應該使用document.createTextNode來創建輸入。這只會創建一個文本元素，其中包含指定的內容。
document.createElement('input')相反，您應該使用并指定其型別和名稱來創建輸入。
由于您需要動態名稱，因此您必須集成動態名稱生成邏輯。我在這里使用(new Date()).toISOString()，因為這每次都是獨一無二的。相反，您必須使用自己的邏輯。
作業小提琴
function addKeywordFields() {
var mydiv = document.getElementById("fieldContainer");
const input = document.createElement('input');
input.type = 'text';
input.name = (new Date()).toISOString(); // Some dynamic name logic
mydiv.appendChild(input);
}<a onclick="addKeywordFields()">Add a keyword</a>
<div id="fieldContainer"></div>uj5u.com熱心網友回復：
有大量的 DOM 方法旨在創建、銷毀、移動等。通常有三種方法可以通過編程方式創建 DOM 元素：
.cloneNode()用and克隆一個元素.append()決議代表 HTML (aka
htmlString) 的字串，使用.insertAdjacentHTML()而不是.innerHTML.createElement()用and創建一個元素.append()
為元素分配屬性/屬性最初可以在.setAttribute()將屬性分配給元素后完成，從技術上講，它是一個屬性。屬性和屬性之間的這種區別是模糊的，因為方法似乎與分配屬性一樣 100% 有效。在這種情況下，jQuery 不是那么靈活，當我忘記屬性/屬性的怪癖時，它默默地失敗了.attr()。.prop()
我很少使用方法來分配屬性，屬性簡潔易用，這里有幾個常用的：
obj.id = "ID", obj.className = "CLASS", obj.name = "NAME"?,
obj.type = "TEXT", obj.dataset.* = "*"
?這是你用來設定/獲取屬性的name屬性
<form>如果有多個表單控制元件，我總是添加一個。如果您使用HTMLFormElement ?和HTMLFormControlsCollection ? 之類的介面，則會有特殊的功能和簡潔的語法。此外，<form>您可以使用它來監聽其中所有內容的事件?，還可以利用特殊形式的事件，如“輸入”、“更改”、“提交”等。HTMLFormElement.elements收集所有表單控制元件（如下所列）
<button>,<fieldset>,<input>,<object>,<output>,<select>,<textarea>.
從該.elements屬性中，任何表單控制元件都可以被#id或參考[name]。如果有一組表單控制元件共享一個[name]，它們可以被收集到一個 HTMLCollection 中。
參考
HTML表單元素?
HTMLFormControlsCollection ?
活動
活動委托?
更多細節在下面的示例中注釋
// Reference the form (see HTMLFormElement)
const UI = document.forms.UI;
// Register form to click event
UI.addEventListener('click', makeInput);
// Define a counter outside of function
let dataID = 0;
// Pass Event Object
function makeInput(e) {
/*
"this" is the form
.elements property is a collection of all form controls
(see HTMLFormsCollection)
*/
const io = this.elements;
// Event.target points to the tag user clicked
const clk = e.target;
/*
This is the fieldset containing the inputs it's in bracket notation
instead of dot notation because it's a hyphenated property
*/
const grp = io['form-group'];
// This is the static input
const inp = io.data;
// if the clicked tag is a button...
if (clk.matches('button')) {
// ...increment the counter
dataID ;
/*
This switch() delegates what to do by the clicked button's [name].
Each case is a different way to create an element and assign a unique
[name] by concatenating the "data" with the current number of dataID
*/
switch (clk.name) {
case 'clone':
const copy = inp.cloneNode(true);
copy.name = 'data' dataID;
grp.append(copy);
break;
case 'html':
const htmlStr = `
<input name="data${dataID}">`;
grp.insertAdjacentHTML('beforeEnd', htmlStr);
break;
case 'create':
const tag = document.createElement('input');
tag.name = 'data' dataID;
grp.append(tag);
break;
default:
break;
}
}
};form {
display: flex;
}
fieldset {
display: inline-flex;
flex-direction: column;
justify-content: flex-startd;
max-width: 90%;
}
input,
button {
display: inline-block;
width: 80px;
margin-bottom: 4px;
}
input {
width: 150px;
}
button {
cursor: pointer;
}<form id='UI'>
<fieldset name='btn-group'>
<button name='clone' type='button'>Clone Node</button>
<button name='html' type='button'>Parse htnlString</button>
<button name='create' type='button'>Create Element</button>
</fieldset>
<fieldset name='form-group'>
<input name='data'>
</fieldset>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/440323.html
標籤：javascript html
上一篇：不顯示背景圖片