ایجاد المان

**Akuser** · شنبه 11 اسفند 1403, 07:32 صبح

سلام وقت بخیر
میخواهم پارامترتابع createElement ازطریق یک لیست کشویی انتخاب شود مثلا یک پاراگراف و همینطور متن آن که ازطریق تابع createTextNodاضافه میشود نیز ازطریق یک ورودی متنی وارد شود و به عنوان پارامتر این تابع باشد.

**mazoolagh** · یک شنبه 12 اسفند 1403, 14:31 عصر

سلام و روز خوش
کد html فعلی رو بگذارین (اینجا یا در یک فیدل)،
روی همون توضیح میدم.

**Akuser** · چهارشنبه 15 اسفند 1403, 05:48 صبح

کد HTML:

var container=document.getElementById("content");
  <select id="opCreate">
     <option value="p">p</option>
     <option value="h1">h1</option>
     <option value="p">a</option>
     <option value="span">span</option>
  </select>
  <input type="text" id="valC">
   <button type="button" onclick="createElem()">ایجاد</button>
      <div id="content">
<div/>



var container=document.getElementById("content");

function createElem()

{

    let opC=document.getElementById("opCreate").value;

let valC=document.getElementById("valC").value;

    let elem=document.createElement(opc);

    let node=document.createTextNode(valc);

    elem.appendChild(node);

    container.appendChild(elem);

    document.body.appendChild(elem);

}

**mazoolagh** · پنج شنبه 16 اسفند 1403, 11:09 صبح

این کد چند اشکال داره:

1- وقتی خط زیر اجرا میشه:

var container=document.getElementById("content");

هنوز dom رِندِر نشده بنابراین content هنوز ناشناخته است،
و در نتیجه container هم undefined هست.

2- جاوااسکریپت case sensitive هست
بنابراین valc و valC با هم یکی نیستن در نتیجه 2 خط زیر هم نادرست هست:

let elem=document.createElement(opc);

let node=document.createTextNode(valc);

3- کد زیر هم که کلا باید پاک بشه چون بی معنی هست:

document.body.appendChild(elem);

پس باید کد مورد شماره 1 زمانی اجرا بشه که همه داکیومنت خونده و لود شده باشه،
برای همین باید اون رو در انتهای داکیومنت بذارین.
همه داکیومنت رو پیوست میکنم تا بهتر متوجه بشین:

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>barnamenevis 591830</title>

    <script>

        function createElem() {

            let opC = document.getElementById("opCreate").value;

            let valC = document.getElementById("valC").value;

            let elem = document.createElement(opC);

            let node = document.createTextNode(valC);

            elem.appendChild(node);

            container.appendChild(elem);

        }     

    </script>

</head>



<body>

    <select id="opCreate">

        <option value="p">paragraph</option>

        <option value="h1">header 1</option>

        <option value="a">anchor</option>

        <option value="span">span</option>

    </select>

    <input type="text" id="valC">

    <button type="button" onclick="createElem()">ایجاد</button>

    <div id="content"></div>

    <script>

            const container = document.getElementById("content");

    </script>

</body>



</html>

**mazoolagh** · پنج شنبه 16 اسفند 1403, 11:36 صبح

اما اینجا شما نیازی به تعریف container به صورت گلوبال ندارین
بنابراین میتونین کد رو به شکل زیر هم بنویسین:

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>barnamenevis 591830</title>

    <script>

        function createElem() {

            const opCreateValue = document.getElementById("opCreate").value;

            const valCValue = document.getElementById("valC").value;

            const elem = document.createElement(opCreateValue);

            const textnode = document.createTextNode(valCValue);

            elem.appendChild(textnode);

            document.getElementById("content").appendChild(ele  m);

        }     

    </script>

</head>



<body>

    <select id="opCreate">

        <option value="p">paragraph</option>

        <option value="h1">header 1</option>

        <option value="a">anchor</option>

        <option value="span">span</option>

    </select>

    <input type="text" id="valC">

    <button type="button" onclick="createElem()">ایجاد</button>

    <div id="content"></div>

</body>



</html>

**mazoolagh** · پنج شنبه 16 اسفند 1403, 12:12 عصر

به دلائل زیادی بهتر هست که بجای آوردن eventها بعنوان attribute المان (مثل همین onclick)
از addEventListener استفاده کنین:

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>barnamenevis 591830</title>

    <script>

        document.addEventListener('DOMContentLoaded', () => {

            const combo = document.querySelector("#opCreate");

            const textbox = document.querySelector("#valC");

            const button = document.querySelector("#btn");

            const div=document.querySelector("#content");

            

            btn.addEventListener('click', () => {

                const elem = document.createElement(combo.value);

                const textnode = document.createTextNode(textbox.value);

                elem.appendChild(textnode);

                div.appendChild(elem);

            });

        });

    </script>

</head>



<body>

    <select id="opCreate">

        <option value="p">paragraph</option>

        <option value="h1">header 1</option>

        <option value="a">anchor</option>

        <option value="span">span</option>

    </select>

    <input type="text" id="valC">

    <button type="button" id="btn">ایجاد</button>

    <div id="content"></div>

</body>



</html>

اینجا از رخداد DOMContentLoaded داکیومنت استفاده کردیم
که در اون مطمئن هستیم همه dom رندر شده و در دسترس هست،
و در این رخداد برای button یک eventlistener برای click تعریف کردیم.

نام تاپیک: ایجاد المان

ابزار های تاپیک

نمایش

ایجاد المان

نقل قول: ایجاد المان

نقل قول: ایجاد المان

نقل قول: ایجاد المان

نقل قول: ایجاد المان

نقل قول: ایجاد المان

قوانین ایجاد تاپیک در تالار