单击后只追加一次新元素，并将其保存到本地存储html javascript

给你

我正在尝试向div添加新元素，这是有效的

我的问题是，我只想在单击按钮时附加新元素一次，并将其保存到localStorage，以便在刷新或任何其他操作时不会丢失状态

div {
text-align: center;
}
#Neighborhood {
color: brown;
}
#NewElement {
color: green;
}

<div id="Neighborhood">
    <div id="Neighbor1">Neighbor 1</div>
    <div id="Neighbor2">Neighbor 2</div>
    <div id="Neighbor3">Neighbor 3</div>
</div>
<input type="button"onclick="add_prev();" value="ACTION">​

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function (element) {
element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function (element) {
element.parentNode.insertBefore(this, element.nextSibling);
}, false;

/* Typical Creation and Setup A New Orphaned Element Object */

add_prev = function () {

var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';
NewElement.appendBefore(document.getElementById('Neighbor2'));
}   

我感谢每一个提示或解决方案！干杯

将其传递给onclick函数。这样，在您完成任务后，只需删除侦听器即可单击或禁用按钮

另外，当页面加载时，从存储器加载信息，如果是真的，直接调用函数，然后禁用按钮。 也许这并不是你所需要的，但它可以帮助很多，你可以按照这个逻辑去实现。下面的代码只是一个示例。 OBS：它在这里不起作用，因为StackOverflow中不允许使用本地存储

在这把小提琴中，你可以试得更好： 在上面的提琴上，创建元素，然后保存并重新加载页面。一旦页面加载，元素就会出现

$document.readyfunction{ add_prev=函数元素{ var NewElement=document.createElement'div'； NewElement.innerHTML='NewElement'； NewElement.id='NewElement'； document.getElementById'Neighbor2'。appendNewElement； setItem'elementCreated'，true； 如果元素{ $elem.attr'disabled'，true； } } var isCreated=localStorage.getItem'elementCreated'； 如果是创建的{ 添加_prev； $btnAdd.attr'disabled'，true； } };

---

您希望每次创建元素时，都将其存储在localStorage上以检索它吗？另外，请注意，创建具有相同Id的普通元素可能会导致问题，Id必须是单个元素的唯一Id。因此，我希望此元素只创建一次：非常感谢！！我还可以创建第二个按钮或元素来隐藏它吗？是的，您可以使用.toggle而不是attr'disabled'。。。这会使按钮隐藏起来