در همه جا AdjacentHTML را وارد کنید

اگر بخواهیم محتوا را در یک سند HTML وارد کنیم، سه راه برای انجام آن داریم:

  • استفاده از متدهای DOM مانند createNode و appendChild
  • استفاده از قطعات سند
  • استفاده از innerHTML

می‌توان گفت که ما document.write نیز برای چند مورد استفاده داریم.

innerHTML در HTML5 استاندارد شده است و با آن یک متد برادر insertAdjacentHTML که به عنوان innerHTML کار می کند، به ما اجازه می دهد تا به طور خاص تری تعریف کنیم که می خواهیم محتوای HTML را وارد کنیم: قبل از شروع، بعد شروع، قبل پایان و بعد پایان.

var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");

در سال 2008 جان رسیگ مقاله ای در مورد insertAdjacentHTML با این نتیجه نوشت:

تا به حال، مشکل اصلی insertAdjacentHTML عدم پشتیبانی مرورگر آن بوده است. با اجرای فایرفاکس insertAdjacentHTML از نسخه 8، در همه مرورگرهای اصلی از جمله مرورگرهای تلفن همراه در دسترس خواهد بود. اگر می خواهید اکنون از آن استفاده کنید و مطمئن شوید که در نسخه های فایرفاکس زودتر از 8 کار می کند، می توانید از این polyfill استفاده کنید.