자바 스크립트를 사용하여 DOM의 요소 주위에 컨테이너를 만드는 방법이 궁금합니다. 이전에 HTML에 DIV를 똑바로 삽입하는 데 성공했지만 몇 가지 요소를 대상으로 지정하고 컨테이너 내부에 배치하고 방법을 확실하지 않습니다.
이것은 html입니다.
<div class="menubar">
<div class="searching myClass yourClass"></div>
<ul class="navVoordelen">
<li></li>
<li></li>
</ul>
<a class="navLogo"></a>
<div class="langsel"></div>
<a class="navLogin"></a>
<a class="navLogin"></a>
<a class="navLogin"></a>
<ul class="newnav clearfix animated">
<li></li>
<li></li>
</ul>
</div>
컨테이너를 상위 메뉴 바 DIV 아래에 배치하고 두 번째 UL 클래스 전에 끝나도록해야합니다. 이것이 내가 원하는 모습입니다.
<div class="menubar">
<div div="container">
<div class="searching myClass yourClass"></div>
<ul class="navVoordelen">
<li></li>
<li></li>
</ul>
<a class="navLogo"></a>
<div class="langsel"></div>
<a class="navLogin"></a>
<a class="navLogin"></a>
<a class="navLogin"></a>
</div>
<ul class="newnav clearfix animated">
<li></li>
<li></li>
</ul>
</div>
다음 접근 방식을 제안합니다.
function wrapAllPrevious() {
// this is assigned via the Function.prototype.call()
// method, later:
var _self = this,
// creating a <div> element:
div = document.createElement('div');
// assigning an 'id' to that created-<div>:
div.id = 'demo';
// inserting the created-<div> before the _self/this
// element, using insertBefore():
_self.parentNode.insertBefore(div, _self);
// while the created-<div> has a previousSibling:
while (div.previousSibling) {
// we insert that previous-sibling before firstChild
// of the <div> (effectively prepending the element
// to the created-<div>):
div.insertBefore(div.previousSibling, div.firstChild);
}
}
// calling the function, using (as noted earlier)
// Function.prototype.call() to assign the specified
// <ul> as the 'this' of the function (using
// document.querySelector() to return the specific node:
wrapAllPrevious.call(document.querySelector('ul.newnav.clearfix.animated'));#demo {
border: 2px solid #f00;
}
#demo::before {
content: "Newly-added <div> element.";
}<div class="menubar">
<div class="searching myClass yourClass"></div>
<ul class="navVoordelen">
<li></li>
<li></li>
</ul>
<a class="navLogo"></a>
<div class="langsel"></div>
<a class="navLogin"></a>
<a class="navLogin"></a>
<a class="navLogin"></a>
<ul class="newnav clearfix animated">
<li></li>
<li></li>
</ul>
</div>참조 :
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다