Вставка переменных в innerHTML

Question

Я пытаюсь создать таблицу, которая появляется в id = "here".

Проблема в том, что мне нужно поставить «var i» внутри заголовка таблицы (th).

При выполнении таблицы не отображается - я предполагаю, что это происходит потому, что строка разбивается, когда я добавляю в «var i».

Есть ли способы обойти это? Есть ли известный способ вставки переменных в такие таблицы?

Любой/Все помощь ценится :)

<p id="here"></p> 
<button type="button" onclick="test();"></button> 

<script> 

var i = Dogs; 
function test() {document.getElementById("here").innerHTML = 
"<table><tr><th>" + i + "</th></tr></table>";} 

</script> 

Answer 1

Добавить котировки собак. Строковые литералы должны иметь котировки.

var i = "Dogs"; 
 
function test() {document.getElementById("here").innerHTML = 
 
"<table><tr><th>" + i + "</th></tr></table>";}

<p id="here"></p> 
 
<button type="button" onclick="test();">click me</button>

Answer 2

Я хотел бы использовать вместо добавления ребенка:

var table = document. createElement("table") 
document.getElementById("hello").appendChild(table) 

... так далее так далее