JavaScript: تبدیل String به HTML

زمان مطالعه: 1 دقیقه
۱۳ مرداد ۱۳۹۳

به نام خدا

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

گاهی اوقات پیش میاد که یک سری کد 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 رو برام بگیره و همیشه خودمو به روز نگه میدارم و به کدنویسی عشق می ورزم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

بهرام

سلام
با تشکر، لطفا بیشتر توضیح بدین. من که نفهمیدم، یعنی خط 1و2و3 رو فهمیدم اما 4و6 رو نه. کار این دو خط چیه؟

لقمان آوند

در خط 4 که همون تگ div رو درخواست میده و میگیره و در خط 6 اونو به انتهای تگ body اضافه میکنه .

na3r

خیلی ممنون کاربری بود!