HTML DOM Element insertAdjacentHTML() ਮੰਥਨ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

insertAdjacentHTML() ਮੰਥਨ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸਥਾਨ ਵਿੱਚ HTML ਕੋਡ ਜੋੜਨਾ。

ਲਾਜ਼ਮੀ ਸਥਾਨ:

ਮੁੱਲ ਵਰਣਨ
afterbegin ਐਲੀਮੈਂਟ ਦੇ ਸ਼ੁਰੂ ਤੋਂ ਬਾਅਦ (ਪਹਿਲੇ ਪੁਛੇਲੇ ਐਲੀਮੈਂਟ)
afterend ਐਲੀਮੈਂਟ ਦੇ ਬਾਅਦ
beforebegin ਐਲੀਮੈਂਟ ਦੇ ਪਹਿਲਾਂ
beforeend ਐਲੀਮੈਂਟ ਦੇ ਅੰਤ ਤੋਂ ਪਹਿਲਾਂ (ਆਖਰੀ ਪੁਛੇਲੇ ਐਲੀਮੈਂਟ)

ਮਾਮਲਾ

ਉਦਾਹਰਣ 1

header ਐਲੀਮੈਂਟ ਦੇ ਬਾਅਦ ਇੱਕ ਨਵਾਂ <p> ਐਲੀਮੈਂਟ ਜੋੜੋ:

const h2 = document.getElementById("myH2");
let html = "<p>My new paragraph.</p>";
h2.insertAdjacentHTML("afterend", html);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

"afterbegin" ਦੀ ਵਰਤੋਂ ਕਰਨਾ:

let html = "<span style='color:red'>My span</span>"; h2.insertAdjacentHTML("afterbegin", html);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

"beforebegin" ਦੀ ਵਰਤੋਂ ਕਰਨਾ:

h2.insertAdjacentHTML("beforebegin", html);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 4

"beforeend" ਦੀ ਵਰਤੋਂ ਕਰਨਾ:

h2.insertAdjacentHTML("beforeend", html);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਗਰੰਥ

element.insertAdjacentHTML(position, html)

ਜਾਂ

node.insertAdjacentHTML(position, html)

ਪੈਰਾਮੀਟਰ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
position

ਜ਼ਰੂਰੀ ਹੈ। ਅੰਤਰਰਚਨਾ ਨਾਲ ਸਬੰਧਤ ਸਥਾਨ:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
html ਜਿਸ ਲਈ HTML ਚੁਣਨਾ ਹੈ。

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ element.insertAdjacentHTML()：

ਕਰੋਮ آئی ای ایج فائرفاکس سافری آپریا
ਕਰੋਮ آئی ای ایج فائرفاکس سافری آپریا
پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی