getElementById(element).innerHTML 缓存？答案

【问题标题】：getElementById(element).innerHTML cache?getElementById(element).innerHTML 缓存？
【发布时间】：2012-06-17 02:05:07
【问题描述】：

这是我的页面代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Marketing Tracking</title>
    </head>
    <body>
        <form action="#" id="form" method="post">
            <div id="namevalues">
                <span id="span:1">
                    <input type="text" id="name:1" onchange="changed(this)" style="width:300px;"/>
                    <input id="value:1" type="number" min="0" value="0" /><br /></span>
            </div>
            <input type="button" id="add" value="Add 1" />
            <br />
            <textarea name="talk" style="width:500px;height:175px;"></textarea>
            <br />
            <input type="button" id="update" value="Update"/>
        </form>
        <script>
function get(a){return document.getElementById(a);}
    up=get("update");
    up.onclick = function(){
    get("form").submit();
}
get("name:1").onchange = function(){changed(this)};
get("add").onclick = function(){add()};<% z=2 %>
function changed(ele){
    id=ele.id;
    val=ele.value;
    id=id.split(":")[1];
    get("value:"+id).name=get("name:"+id).value;
}
function add(){
    document.getElementById("namevalues").innerHTML+='<span id="span:'+z+'"><input type="text" id="name:'+z+'" onchange="changed(this)" style="width:300px;"/><input id="value:'+z+'" type="number" min="0" value="0" /><br /></span>';
}
        </script>
    </body>
</html>

我很困惑为什么当我按“添加 1”按钮输入一些文本然后再次按“添加 1”按钮时，我刚刚输入的文本消失了！

如果有人能提供一些见解，将不胜感激

【问题讨论】：

标签： javascript html dom javascript-events

【解决方案1】：

您的其他值消失的原因是因为当您执行something.innerHTML += something 时，它将重写该区域的 HTML（意味着之前存在的内容已经消失，将被新的 HTML 替换）。您可能想要做的是：

function add(){
    var div = document.createElement("div");
    div.innerHTML = '<span id="span [... the rest of the code ...]<br /></span>';
    document.getElementById("namevalues").appendChild(div);
}

使用 appendChild 不会改变 div namevalues 中已经存在的其他元素。

【讨论】：

我对其进行了一些修改，因此 createElement 正在创建 <span> 标记并仅设置 id 但运行良好。 :] <div> 标签与填充和边距混淆，而 <span> 标签只是将标签组合在一起。

【解决方案2】：

只是一件小事，但尝试使用

<script type="text/javascript">

当我使用 inner.document 的东西时，我遇到了各种各样的问题，直到我添加了那个代码。

【讨论】：