Добавление функции в элемент DOM

#javascript

Вопрос:

Я пытаюсь вызвать функцию в моем <p> , которая должна вызывать числа (цикл while) от 1 до 25. Но я не уверен, как двигаться дальше.

Как бы я добавил эту информацию в тег paragraph без использования console.log() or document.write() , но вместо этого используя document.createElement и node.append для вставки моих результатов в HTML?

Как бы я вызвал эту функцию внутри тега p в DOM HTML?

 function oneThroughTwentyFive() {
  let count = 1
  while(count <= 25) {
    count  
  }
}

1. Где ваш код? Пожалуйста, предоставьте минимальный рабочий пример!

2. в каком событии и для какого результата?

3. Насколько я понимаю, вы хотите отобразить 1 в элементе p, а затем увеличивать его, пока не дойдете до 25? Это правильно?

4. Да, это правильно

5. Отобразить где?

Ответ №1:

Это приведет к отображению <p> элемента с номерами от 1 до 25 внутри него.

 <html>
  <body>

  </body>
  <script>
    let p = document.createElement('p');
    let script = document.createElement('script');
    script.innerHTML = `
        let numbers = "";
        for (let e = 1; e <= 25; e  ) numbers  = e   " ";
        document.currentScript.parentNode.innerHTML = numbers;
    `
    p.appendChild(script)
    document.body.appendChild(p)
  </script>

</html>

По сути, это:

Создайте <p> элемент
Создайте <script> элемент
Добавьте код Javascript для отображения чисел в <script> элементе
Добавьте <script> элемент к <p> элементу
Добавьте <p> элемент (который теперь содержит код Javascript внутри него) в тело

И это то, что делает Javascript в <p> элементе:

Перебирайте все числа от 1 до 25
Добавьте каждое число плюс пробел (чтобы числа не накладывались друг на друга) к переменной numbers
Найдите родительский элемент текущего скрипта (в данном случае <p> который содержит <script>
Перепишите все содержимое <p> элемента (включая JS-код, используемый для создания чисел) с помощью чисел.

Код Javascript, используемый для создания чисел, удален, поэтому конечный элемент будет выглядеть следующим образом:

 <p>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25</p>

Ответ №2:

это?

 const pTag = document.querySelector('p#pTag')

for (let i=1;i<=25;  i) pTag.textContent  = i ' '


// -------------------------------------------

// the method name say's all
let otherP = document.createElement('p')  

// just a trick as many in JS
otherP.textContent = Array.from(Array(10),(_,i)=>i 25).join(' ') 

// append otherP in the right place on the DOM
document.body.appendChild( otherP )

 <p id="pTag"></p>

1. Что, если бы вам пришлось использовать document.createElement() для создания абзаца <p> и поместить тот же код внутрь элемента paragraph?

2. @WilliamElliot добавил код для этого. Пожалуйста, используйте MDN, чтобы узнать все о веб-разработке, это место предназначено не для изучения языков, а для помощи в совершенствовании методов кодирования. developer.mozilla.org/en-US/docs/Web/JavaScript