반응형
JavaScript를 사용하여 div 내에서 HTML 추가 / 제거
div에 여러 행을 추가하고 제거 할 수 있기를 원합니다. 페이지 상단에 콘텐츠를 추가하기위한 '+'버튼이 있습니다. 그런 다음 모든 행의 오른쪽에는 해당 행을 제거하는 '-'버튼이 있습니다. 이 예제에서는 자바 스크립트 코드를 알아낼 수 없습니다.
이것은 내 기본 HTML 구조입니다.
<input type="button" value="+" onclick="addRow()">
<div id="content">
</div>
이것이 콘텐츠 div 안에 추가하고 싶은 것입니다.
<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()">
이런 식으로 할 수 있습니다.
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);
}
이 함수를 사용하여 DOM 요소에 자식을 추가 할 수 있습니다.
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);
}
가장 놀랍게도 저는이 질문을 googeling insertAdjacentHTML하고 MDN에서 고대 를 찾기 전에 사용한 적이없는 DOM 메서드 를 제공합니다 (예쁜 녹색 호환성 테이블 은 CanIUse? insertAdjacentHTML 참조 ).
그래서 그것을 사용하면
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>To remove node you can try this solution it helped me.
var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);
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);
}
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 ');
});
});
<!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>
참고URL : https://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript
반응형
'program story' 카테고리의 다른 글
| Scala 컬렉션의 인덱스에서 옵션을 얻는 방법은 무엇입니까? (0) | 2020.11.27 |
|---|---|
| 대체 이미지에 대한 각도 지시문 (0) | 2020.11.27 |
| Angular 2에 사용 가능한 여만 생성기 (0) | 2020.11.27 |
| org.openqa.selenium.WebDriverException : 알 수없는 오류 : 호출 함수 결과 '값'누락 (0) | 2020.11.27 |
| DropDownList 컨트롤에 RequiredFieldValidator를 추가하는 방법은 무엇입니까? (0) | 2020.11.27 |