Как показать * шаблоны в конкретном div с помощью javascript looping

Question

Текущий код показывает * шаблон в документе, но я хочу, чтобы он отображался в конкретном div. У меня есть div с #result. Я хочу показать шаблон в #result div.

<script> 
    var maxs = 1; 

    for(var i=1;i<=5;i++){ 
    for(var x=1;x<=maxs;x++){ 
     document.write("*"); 
    } 
    document.write("<br>"); 
    maxs++ 
    } 

    </script> 

Answer 1

Используйте innerHTML свойство для установки HTML и выберите элемент, используя getElementById

+= ш плохо объединить новый HTML с существующим HTML и заменить inner-html элемента с объединенным html

var maxs = 1; 
 
for (var i = 1; i <= 5; i++) { 
 
    for (var x = 1; x <= maxs; x++) { 
 
    document.getElementById('result').innerHTML += "*"; 
 
    } 
 
    document.getElementById('result').innerHTML += "<br>"; 
 
    maxs++ 
 
}

<div id='result'></div>

Или кэшировать html и .innerHTML только один раз после цикла, который будет обновлять DOM только один раз

var maxs = 1; 
 
var html = ''; 
 
for (var i = 1; i <= 5; i++) { 
 
    for (var x = 1; x <= maxs; x++) { 
 
    html += "*"; 
 
    } 
 
    html += "<br>"; 
 
    maxs++ 
 
} 
 
document.getElementById('result').innerHTML = html;

<div id='result'></div>

Answer 2

Использование

document.getElementById("result").textContent = "*" 

Вы можете также использовать .innerHTML

Answer 3

Получить Div элемент с идентификатором result с помощью document.getElementById(), а затем использовать innerHTML свойство йот элемента для обновления содержимого HTML.

var maxs = 1, 
 
    div = document.getElementById('result'); 
 

 
for (var i = 1; i <= 5; i++) { 
 
    for (var x = 1; x <= maxs; x++) { 
 
    div.innerHTML += "*"; 
 
    } 
 
    div.innerHTML += "<br>"; 
 
    maxs++ 
 
}

<div id="result"></div>

Answer 4

В вашем HTML, добавьте div заполнитель для обновления результата. Также обновление DOM за каждые for loop итерация стоит дорого, поэтому лучше cache с использованием временной переменной output, а затем в конце установить innerHTML свойство div на это output.

<div id="result"></div> 

<script> 
var maxs = 1; 
var output=""; 
for(var i=1;i<=5;i++){ 
    for(var x=1;x<=maxs;x++){ 
     output +="*"; 
    } 
    output +="<br/>"; 
    maxs++; 
} 
document.getElementById("result").innerHTML = output; 
</script>