javascript 重置div的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29892700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reset content of div
提问by Lazar Bulatovic
I have two divs with some 'deafult' content. When I click on link it changes html of that div. So I what to reset div html to initial content.
我有两个带有“默认”内容的 div。当我单击链接时，它会更改该 div 的 html。所以我如何将 div html 重置为初始内容。
Example:
例子：
<a id="click1" href="#">Add</a><a id="click2" href="#">Reset</a>
<div id="click1_div">
<p>some text</p>
</div>
So when I click on AddjQuery will append some html, and when I click on Resetit should get back old html div content.
因此，当我单击“添加jQuery”时，将附加一些 html，当我单击“重置”时，它应该会返回旧的 html div 内容。
Any idea?
任何的想法？
回答by Pedro José Cardoso
Perhaps you should save the old html before setting the new one.
也许你应该在设置新的 html 之前保存旧的 html。
var old_html = $("#click1_div").html();
And then use the old_html value to reset the innerhtml:
然后使用 old_html 值重置innerhtml：
$("#click1_div").html(old_html);
回答by Pedro José Cardoso
example: http://jsfiddle.net/WebJedi/4Lz43nco/1/
示例：http: //jsfiddle.net/WebJedi/4Lz43nco/1/
$(document).ready(function() {
var isChanged = false,
$clickDiv = $('#click1_div'),
defaultText;
$('#click1').on('click', function(e) {
e.preventDefault();
if(!isChanged) {
defaultText = $clickDiv.html();
isChanged = true;
$clickDiv.html('<strong>CHANGE TEXT</strong>');
} else {
alert('div is already changed');
}
});
$('#click2').on('click', function(e) {
e.preventDefault();
if(isChanged) {
$clickDiv.html(defaultText);
isChanged = false;
} else {
alert('no change detected');
}
});
});
回答by Mehdi Brillaud
$(document).ready(function(){
var $container = $('#container'),
$content = $container.html(),
$newContent = '<br> Some content';
$('#add').on('click', function(){
$container.html($newContent);
});
$('#reset').on('click', function(){
$container.html($content)
});
});
回答by Sunil Acharya
Add this function somewhere on your page (preferably in the )
在您的页面上的某处添加此功能（最好在 ）
function clearBox(elementID)
{
document.getElementById(elementID).innerHTML = "";
}
Then add the button on click event
然后在点击事件上添加按钮
<button onclick="clearBox('cart_item')" />
In JQuery (for reference)
在 JQuery 中（供参考）
If you prefer JQuery you could do:
如果你更喜欢 JQuery，你可以这样做：
$("#cart_item").html("");
回答by Richard Parnaby-King
I would add the original html to a variable to be used when the reset button is clicked. Something like:
我会将原始 html 添加到单击重置按钮时要使用的变量中。就像是：
//save original html of div
var originalHtml = $('#click1_div').html();
//when click on reset button, restore html
$('#click2').on('click', function(e){
e.preventDefault();
$('#click1_div').html(originalHtml);
});
回答by Brijesh Bhatt
Try this, .html()will fetch you old html content save it to a variable and same .html()method will replace the old content with new content:
试试这个，.html()将获取旧的 html 内容并将其保存到一个变量中，同样的.html()方法将用新内容替换旧内容：
$(document).ready(function(){
var old="";
$("#click1").click(function(){
old=$("#click1_div").html();
$("#click1_div").html("asdfad");
});
$("#click2").click(function(){
$("#click1_div").html(old);
});
});
回答by Johann
you cannot reset the content without storing the initial value. You can do somthing like this:
如果不存储初始值，则无法重置内容。你可以做这样的事情：
var initialContent;
$("#click1").click(function() {
initialContent = $("#click1_div").html();
// replace content here
}
And on reset you can write it back to the div:
在重置时，您可以将其写回 div：
$("#click2").click(function() {
$("#click1_div").html(initialContent);
}
