我有一个部门,我需要在事件中更改其外部HTML。问题是在设置outerHTML
时我无法引用新选择的DOM对象,除非我再次明确地捕获它。
有没有办法在调用outerHTML
时直接更新变量引用(在我的情况下是下面div
变量的引用)?
$("#changeDiv").click(function(){
var div = $(this).prev();
div[0].outerHTML = `<div id="imSecondtDiv"> <p> World </p> </div>`;
console.log(div); // logs [div#imFirstDiv, prevObject: n.fn.init[1], context: button#changeDiv]
// the following line does not affect the newly added division
// since the var `div` references the old DOM object
// unless I add div = $(this).prev(); before setting the html of
// the paragraph it will not set it
div.find('p').html('Override');
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imFirstDiv"> <p> Hello </p> </div>
<button id="changeDiv" >Change Div 1</button>
&#13;
答案 0 :(得分:2)
正如您所看到的那样,更改outerHTML
会使事情表现得有点奇怪,因为您完全取代原始元素但仍然引用旧元素。
最好创建一个新的div
,然后将其添加after()
旧的remove()
,然后添加short documentation on github。这样可以将div
的位置保持在正确的位置。
$("#changeDiv").click(function(){
// get the oldDiv
var oldDiv = $(this).prev();
// Create a newDiv
var newDiv = $('<div id="imSecondtDiv"> <p> World </p> </div>');
// add newDiv after oldDiv one, then remove oldDiv from the DOM.
oldDiv.after(newDiv).remove();
// now you still have the reference to newDiv, so do what you want with it
newDiv.find('p').html('Override');
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imFirstDiv"> <p> Hello </p> </div>
<button id="changeDiv" >Change Div 1</button>
&#13;
如果你真的需要使用outerHTML,你可以再次抓住$(this).prev()
:
$("#changeDiv").click(function(){
var div = $(this).prev();
div[0].outerHTML = `<div id="imSecondtDiv"> <p> World </p> </div>`;
// the "new" div is now before the button, so grab the reference of THAt one
div = $(this).prev();
// the following line does not affect the newly added division
// since the var `div` references the old DOM object
// unless I add div = $(this).prev(); before setting the html of
// the paragraph it will not set it
div.find('p').html('Override');
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imFirstDiv"> <p> Hello </p> </div>
<button id="changeDiv" >Change Div 1</button>
&#13;
答案 1 :(得分:0)
我通过获取将要替换的标记的引用元素(兄弟或父级)来解决这个问题。
这是一个函数,它不依赖于你要改变的元素:
function replaceElement(ele, outerHTML)
{
var parent = false, refEle;
//if element that's going to be changed has previousElementSibling, take it as reference. If not, the parentElement will be the reference.
if (ele.previousElementSibling !== null)
refEle = ele.previousElementSibling;
else
{
refEle = ele.parentElement;
//indicate that parentElement has been taken as reference
parent = true;
}
//change the outerHTML
ele.outerHTML = outerHTML;
//return the correct reference
if (parent)
return refEle.firstElementChild;
else return refEle.nextElementSibling;
}
所以在你的情况下,你会这样调用它:
div[0] = replaceElement(div[0], '<div id="imSecondtDiv"> <p> World </p> </div>');
我希望它也适用于jQuery,因为我只用原生javascript编写所有脚本。