다음 구문을 사용할 때 각 속성 및 이벤트 유형에 대한 해결 방법을 지루하게 검색하는 대신 :
elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);전체 HTML 요소를 문자열로 선언 할 수있는 방법이 있습니까? 처럼:
elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);답변:
직접 엉망으로 innerHTML만드는 대신 조각을 만든 다음 삽입하는 것이 좋습니다.
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);혜택:
innerHTML함수 내에서 사용 되지만 모든 것이 DOM 외부에서 발생하므로 생각보다 훨씬 빠릅니다.
당신은 이것을 원합니다
document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );body요소 에서 작동하지 않는 것 같지만 다른 요소에서는 잘 작동합니다.
<body>. 사실, 그것을 실행하는 <body>것은 콘솔을 통해 웹 페이지에 스타일 시트와 같은 것을 삽입하는 나의 표준 방법입니다. 어떤 문제가 있습니까?
<body>정의되지 않은 경우 다른 모든 요소도 마찬가지이므로 Phill의 문제가 아닐 수 있습니다.
insertAdjacentHTML 살펴보기
var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>position 은 삽입하려는 요소에 대한 상대적인 위치 입니다.
'beforebegin' 요소 자체 앞
'afterbegin' 요소 바로 안쪽, 첫 번째 자식 앞
'beforeend' 요소 바로 내부, 마지막 자식 뒤
'afterend' 요소 자체 뒤
구식 JavaScript에서는 다음과 같이 할 수 있습니다.
document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;귀하의 의견에 대한 답변 :
[...] 요소가 아닌 새 요소의 속성과 이벤트의 소스를 선언하는 데 관심이있었습니다
innerHTML.
하지만 새 HTML을 DOM에 삽입해야합니다. 이것이 innerHTML구식 JavaScript 예제에서 사용되는 이유 입니다. innerHTML의 BODY요소는 새로운 HTML로 앞에 추가됩니다. .NET 내부의 기존 HTML을 실제로 건드리지 않습니다 BODY.
이를 명확히하기 위해 위에서 언급 한 예를 다시 작성하겠습니다.
var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'JavaScript 프레임 워크를 사용하면이 코드가 훨씬 덜 장황 해지고 가독성이 향상됩니다. 예를 들어 jQuery를 사용하면 다음을 수행 할 수 있습니다.
$('body').prepend('<p id="foo">Some HTML</p>');document.getElementsByTagName('body')[0]실제로 document.body, 좋은 점 으로 대체 될 수 있습니다 . 그러나 BODY 대신 기존의 다른 요소에 새 HTML을 추가하거나 추가하려면 document.getElementById()및 / 또는 document.getElementsByTagName(); 을 사용해야합니다 . 이것이 제가 예제에서 사용한 이유입니다.
다른 사람들이 말했듯이 편리한 jQuery prepend 기능을 에뮬레이션 할 수 있습니다.
var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;어떤 사람들은 innerHTML 을 "혼잡"하지 않는 것이 낫다고 말하지만 , 다음을 알고 있다면 많은 사용 사례에서 신뢰할 수 있습니다.
경우
<div>,<span>또는<noembed>노드는 문자를 포함하는 자식 텍스트 노드를 (가&), (<), 또는 (>)는 innerHTML을은이 문자를 반환&,<및>각각.Node.textContent이러한 텍스트 노드 내용의 올바른 복사본을 가져 오는 데 사용 합니다.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
또는:
var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)insertAdjacentHTML아마도 좋은 대안 일 것입니다 : https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
기존 페이지의 태그 안에 HTML 코드를 삽입하려면 Jnerator를 사용 하십시오 . 이 도구는이 목표를 위해 특별히 만들어졌습니다.
다음 코드를 작성하는 대신
var htmlCode = '<ul class=\'menu-countries\'><li
class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;더 이해하기 쉬운 구조를 작성할 수 있습니다.
var jtag = $j.ul({
class: 'menu-countries',
child: [
$j.li({ class: 'item', child: [
$j.img({ src: 'au.png' }),
$j.span({ child: 'Australia' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'br.png' }),
$j.span({ child: 'Brazil' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'ca.png' }),
$j.span({ child: 'Canada' })
]})
]
});
var htmlCode = jtag.html();
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;