es6 的新手，有没有办法在 DOM 中使用模板文字 `` 附加 HTML 而不会覆盖当前发布的内容？
我有一大块 HTML 需要为正在创建的列表发布。用户可以在哪里发布他们的输入。
每次提交任务时，它都会覆盖当前提交。我需要它附加在下面。
小提琴用于演示目的。
https://jsfiddle.net/uw1o5hyr/5/
<div class = main-content>
<form class ='new-items-create'>
<label>Name:</label><input placeholder=" A Name" id="name">
<button class = "subBtn">Submit</button>
</form>
</div>
<span class="new-name"></span>
JavaScript
form.addEventListener('submit',addItem);
function addItem(event){
event.preventDefault();
let htmlStuff =
`
<div class="main">
<div class="a name">
<span>${name.value}</span>
</div>
<div>
`
itemCreated.innerHTML = htmlStuff;
}
我偶然发现了一些奇怪的东西（至少对我来说）。案例如下：
我从 DOM 中选择一个元素child1并将其保存到变量中。我继续向child1的父元素Parent1添加一个新元素。现在，如果我尝试修改child1上的某些值，它不会注册更改。似乎引用已经消失，它仅指较早的副本。
示例
child1 = inputField
Parent1 = 容器
function start() {
var inputField = document.querySelector('#inputField');
// Works if addSomething() is commented out.
addSomething();
console.log(inputField);
doSomething(inputField);
}
function addSomething() {
var container = document.querySelector('#container');
container.innerHTML += '<div class="something"></div>'
}
function doSomething(el) {
el.value = 'Some random input';
}
start();
小提琴示例
对不起，如果这是非常基本的问题或者之前已经被问过的问题。我尝试用谷歌搜索，但没有找到任何与我使用的搜索词相关的内容。A
好吧,我想说
<div id="container"/>
然后我在这个容器中放了一个id ="button"的按钮.然后我为它做了.click处理程序
$("#button").click(function() {
foo();
}
然后我像这样改变div的innerHTML:
$("#container").html = "<h1> Foo </h1>";
然后我设置计时器让我们说5秒后,执行以下代码:
function(){
$("#container").html = "<button id="button" type="button">Click Meh!</button>"
$("#button").click(function() {
foo();
}
}
我的问题是:第一个按钮被"破坏"了,第一个.click()处理程序也被销毁了吗？或者第二个.click()只会为同一个按钮创建第二个处理程序,如果我想$("#button").off("click")在调用第二个.click()之前只需要一个处理程序？
我创建了一个'p'节点并将其附加到'body'.
接下来,我更改了节点的样式并将其从"body"中删除.它奏效了.
但是当我在改变'body.innerHTML'后做同样的事情时,它没有用.
控制台说,
未捕获的NotFoundError:无法在"节点"上执行"removeChild":要删除的节点不是此节点的子节点.
为什么会这样？
<p><button onclick="func1()">Result 1</button></p>
<script>
function func1() {
var body = document.body;
var p = document.createElement('p');
p.id = 'p1';
p.innerHTML = 'Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>';
body.appendChild(p);
p.style.color = '#0055aa';
p.style.backgroundColor = '#ffaa00';
// body.removeChild(p); // It works.
body.innerHTML += '<p>' + p.innerHTML + '</p>';
body.removeChild(p); // It doesn't work.
}
</script>我不明白为什么addEventListener工作一次？
let input = document.querySelector(".send");
let i = 0;
input.addEventListener('click',(e)=>{
e.preventDefault();
i+=1;
document.body.innerHTML += i;
});<input type="submit" class="send">我知道有很多关于此的主题，但它们解决了一些可变问题。我的要简单得多，但它不起作用。只工作一次。
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
document.body.innerHTML += '<div>welcome</div>';
}<body>
<button id="bt1">Click me</button>
</body>我尝试将clicked函数放入和取出onclick语句（如其他一些主题所建议的那样）。
我还尝试移动bt1变量声明（并且根本不使用变量）。
使用JavaScript追加新元素时遇到问题.我不使用任何库,如jQuery或其他任何东西,我在使用本机JavaScript时这样做.
好的,我正在尝试在<body>标签上添加一个新元素.如果在jQuery中你可以使用该.append()函数,但是在使用本机JavaScript时你必须使用.innerHTML.
这是我的HTML代码
<button id="add">
Add
</button>
这是我的JavaScript代码
document.getElementById("add").addEventListener("click", (e) => {
document.getElementsByTagName("body")[0].innerHTML += '<p>Hello world</p>';
});
当我点击"添加"按钮时,它第一次工作.但是,当我再次点击它不起作用.当我尝试使用jQuery追加新元素然后它工作,有没有更少？
我动态创建了一个具有EventListener的复选框。不幸的是，如果我使用以下内容更改复选框标签的文本，则 EventListener 不起作用innerHTML：
let label = document.createElement('label'),
input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));
label.appendChild(input);
document.body.appendChild(label);
label.innerHTML += 'Select Me!';我怎样才能规避这个问题，为什么它甚至存在？
这是一个没有的工作片段innerHTML：
let label = document.createElement('label'),
input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));
label.appendChild(input);
document.body.appendChild(label);我有一个向页面添加按钮的功能.
var count = 0;
function createOnclickFunction(number)
{
return function()
{
alert("This is button number " + number);
}
}
function addButton(data)
{
var newbutton = "..." //creates string from data
var element = document.getElementById("mydiv");
var children = element.children;
element.innerHTML = newbutton + element.innerHTML;
var currentCount = count;
children[0].onclick = createOnclickFunction(currentCount)
count++;
}
它基本上根据一些数据在html中创建一个按钮.
每次我添加一个按钮,我希望它被添加到div的开头#mydiv,并且由于newbutton也不是Element,但是a String,我必须修改innerHtml以将其添加到开头#mydiv.
之后,我必须通过获取第一个孩子来获取元素(添加onclick)#mydiv.
但是,在我的页面添加第二个按钮后,第一个按钮onclick不再有效.
如果我修改我的代码只添加一个按钮,一切正常.
现在,只需单击顶部按钮(最新添加的按钮)即可.
我怎样才能解决这个问题？
我也试过用element.firstChild而不是element.children[0].
在此先感谢大家!
编辑:
这是一个jsfiddle :(你可以看到唯一有效的按钮是stackoverflow …