insertAdjacentHTML은 기대대로 이동하지 않습니다

10892 단어 HTMLJavaScript

개요

insertAdjacentHTML는 어떤 요소에 HTML을 삽입할 수 있는 편리한 사람이다.
(자세한 내용은 위 URL 참조)
이런 편의성에 의존해서 안 좋은 방법을 사용했는지 때로는 기대했던 대로 행동하지 못할 때가 있다.

코드

<html>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</html>
html 태그만 준비하면 그 외의 모든 요소insertAdjacentHTML를 삽입할 수 있는 코드입니다.
마지막으로 console. info 내의 HTML입니다.log,log

동작 확인


Chrome

バージョン: 73.0.3683.75（Official Build） （64 ビット）

나타내다



console.log


계속 출력하면 보기 힘들어서 성형만 했어요
script 태그는 head 태그로 둘러싸여 있지만 삽입된 HTML로 볼 때 동작이 예상과 일치합니다
<head>
  <title>example</title>
</head>
<body>
  <div style="background-color:gray">BODY</div>
</body>
<head>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</head>

Safari

バージョン12.0.3 (14606.4.5)

나타내다



console.log


계속 출력하면 보기 힘들어서 성형만 했어요
"타이틀 탭을 둘러싼 헤드 탭"과 "body 탭"이 사라지고 안쪽 타이틀과 div 탭만 남았습니다.
<title>example</title>
<div style="background-color:gray">BODY</div>
<head>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</head>

Firefox

65.0.1 (64 ビット)

나타내다



console.log


계속 출력하면 보기 힘들어서 성형만 했어요
"타이틀 탭을 둘러싼 헤드 탭"과 "body 탭"이 사라지고 안쪽 타이틀과 div 탭만 남았습니다.
<title>example</title>
<div style="background-color:gray">BODY</div>
<head>
  <script>
    const html = `<head><title>example</title></head>
      <body><div style="background-color:gray">BODY</div></body>`;
    const elem = document.getElementsByTagName('html')[0];
    elem.insertAdjacentHTML('afterbegin', html);
    console.log(elem.innerHTML);
  </script>
</head>

총결산


HTML은 브라우저에 따라 어떤 브라우저가 생각했던 것처럼 보이든지 간에 바뀝니다.
(바디 라벨이 없기 때문에 정확한 외관도 미묘하게 다르다)
전반적으로 너무 많이 몰입하면 안 돼요.
왜 이렇게 됐는지 따라잡을 수 없으니까 말해주면 기쁠 거야

보태다


아래에 이렇게 쓰면 어느 브라우저든지 HTML을 상상할 수 있다
<html>
  <script>
    const head = document.createElement('head');
    head.insertAdjacentHTML('afterbegin', '<title>example</title>');
    const body = document.createElement('body');
    body.insertAdjacentHTML('afterbegin', '<div style="background-color:gray">BODY</div>');
    const html = document.getElementsByTagName('html')[0];
    html.insertAdjacentElement('beforeend', head);
    html.insertAdjacentElement('beforeend', body);
    console.log(html.innerHTML);
  </script>
</html>
5.python~귀속 (em......)
HTML 베이스 요약

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage