JavaScript: تبدیل String به HTML

به نام خدا

با سلام خدمت دوستان سون‌لرنی عزیز.

گاهی اوقات پیش میاد که یک سری کد HTML رو به صورت String (رشته) در اختیار داریم و میخواهیم درون این تگ ها، تگ خاصی رو بگیریم و یا عملیاتی روش انجام بدیم. به کد زیر توجه کنید.

var string = '<div class="html">This is a <b>HTML</b> Element</div>';
var el = document.createElement('DIV');//create a Element
el.innerHTML = string;// convert string to HTML
var myFirstElement = el.querySelector('div');//get same HTML Tags

document.body.appendChild(myFirstElement);// append Element in Body

در خط اول ما یک رشته داریم که میخواهیم اون رو به HTML تبدیل کنیم. ابتدا یک المنت ایجاد میکنیم(میتونید هر المنتی ایجاد کنید، مثل span, b, section, header و ...) و سپس رشته مونو به صورت HTML در المنتی که ساختیم، ذخیره میکنیم و بعد همون رشته ای که به HTML تبدیل شد رو در یک متغیر دیگر ذخیره میکنیم.

کاربر این کد میتونه وقتی باشه که  یک صفحه ی HTML رو با Ajax گرفته باشید و بخواهید بخشی از اون رو داخل قسمتی از صفحه قرار بدید و یا هرجایی که صلاح بدونید کاربرد داره.

موفق باشید.

نویسنده

علی امینی

یک وب دیزاینر هستم که میشه گفت بر زبان های HTML, CSS, JavaScript مسلطم و همیشه با کتابخانه jQuery کار میکنم. از میان زبان های سمت سرور PHP رو میپسندم و CMS مورد علاقه من WordPress هست. هیچ IDE نمیتونه جای SublimeText رو برام بگیره و همیشه خودمو به روز نگه میدارم و به کدنویسی عشق می ورزم.