使用 JavaScript 在 div 中添加/删除 HTML

小开

make a class for that button lets say :

`<input type="button" value="+" class="b1" onclick="addRow()">`

your js should look like this :

$(document).ready(function(){
$('.b1').click(function(){
$('div').append('<input type="text"..etc ');
});
});

小开

最佳答案

You can do something like this.

function addRow() {
const div = document.createElement('div');


div.className = 'row';


div.innerHTML = `
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label>
<input type="checkbox" name="check" value="1" /> Checked?
</label>
<input type="button" value="-" onclick="removeRow(this)" />
`;


document.getElementById('content').appendChild(div);
}


function removeRow(input) {
document.getElementById('content').removeChild(input.parentNode);
}

小开

You can use this function to add an child to a DOM element.

function addElement(parentId, elementTag, elementId, html)


{




// Adds an element to the document




var p = document.getElementById(parentId);
var newElement = document.createElement(elementTag);
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
p.appendChild(newElement);
}






function removeElement(elementId)


{


// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}

小开

please try following to generate

 function addRow()
{
var e1 = document.createElement("input");
e1.type = "text";
e1.name = "name1";


var cont = document.getElementById("content")
cont.appendChild(e1);


}

小开

To remove node you can try this solution it helped me.

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);

小开

To my most biggest surprise I present to you a DOM method I've never used before googeling this question and finding ancient insertAdjacentHTML on MDN (see CanIUse?insertAdjacentHTML for a pretty green compatibility table).

So using it you would write

function addRow () {
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
`<div class="row">
<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow(this)">
</div>`
)
}


function removeRow (input) {
input.parentNode.remove()
}

<input type="button" value="+" onclick="addRow()">


<div id="content">
</div>

小开

<!DOCTYPE html>
<html>
<head>
<title>Dynamical Add/Remove Text Box</title>
<script language="javascript">


localStorage.i = Number(1);


function myevent(action)
{
var i = Number(localStorage.i);
var div = document.createElement('div');


if(action.id == "add")
{
localStorage.i = Number(localStorage.i) + Number(1);
var id = i;
div.id = id;
div.innerHTML = 'TextBox_'+id+': <input type="text" name="tbox_'+id+'"/>' + ' <input type="button" id='+id+' onclick="myevent(this)" value="Delete" />';


document.getElementById('AddDel').appendChild(div);
}
else
{
var element = document.getElementById(action.id);
element.parentNode.removeChild(element);
}
}
</script>
</head>
<body>
<fieldset>
<legend>Dynamical Add / Remove Text Box</legend>
<form>
<div id="AddDel">
Default TextBox:
<input type="text" name="default_tb">
<input type="button" id="add" onclick="myevent(this)" value="Add" />
</div>
<input type="button" type="submit" value="Submit Data" />
</form>
</fieldset>
</body>
</html>

小开

Another solution is to use getDocumentById and insertAdjacentHTML.

Code:

function addRow() {


const  div = document.getElementById('content');


div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');


}

Check here, for more details: Element.insertAdjacentHTML()

小开

Add HTML inside div using JavaScript

Syntax:

element.innerHTML += "additional HTML code"

or

element.innerHTML = element.innerHTML + "additional HTML code"

Remove HTML inside div using JavaScript

elementChild.remove();

小开

I know it took too long, it means you can write more briefly.

    function addRow() {
var inputName, inputValue, label, checkBox, checked, inputDecrease, content, Ptag;
// div
content = document.getElementById('content');
// P tag
Ptag = document.createElement('p');
// first input
inputName = document.createElement('input');
inputName.type = 'text';
inputName.name = 'name';
// Second input
inputValue = document.createElement('input');
inputValue.type = 'text';
inputValue.name = 'Value';
// Label
label = document.createElement('label');
// checkBox
checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.name = 'check';
checkBox.value = '1';
// Checked?
checked = document.createTextNode('Checked?');
// inputDecrease
inputDecrease = document.createElement('input');
inputDecrease.type = 'button';
inputDecrease.value = '-';
inputDecrease.setAttribute('onclick', 'removeRow(this)')
// Put in each other
label.appendChild(checkBox);
label.appendChild(checked);
Ptag.appendChild(inputName);
Ptag.appendChild(inputValue);
Ptag.appendChild(label);
Ptag.appendChild(inputDecrease);
content.appendChild(Ptag);
}


function removeRow(input) {
input.parentNode.remove()
}

* {
margin: 3px 5px;
}

<input type="button" value="+" onclick="addRow()">


<div id="content">


</div>