Переведите JQuery код в Javascript проблема с "prepend"

Question

Я хочу перевести этот jquery код: $('#zone').prepend('<p><strong>' + login + '</strong> ' + message + '</p>');

Я пробовал это: document.getElementById('zone').innerHTML = '<p><strong>' + login + '</strong> ' + message + '</p>';

, но проблема в том, что я не знаю, где я могу поставить ". перед именем». спасибо за вашу помощь

Answer 1

Если вы хотите придерживаться innerHTML, вы можете просто сделать это:

const zone = document.getElementById('zone');
zone.innerHTML = '<p><strong>' + login + '</strong> ' + message + '</p>' + zone.innerHTML;

Другая идея состоит в том, чтобы использовать элемент dynamici c и избегать перезаписи вашего #zone HTML (это важно, когда у вас есть такие вещи, как входные данные, потому что первый пример их очистит):

const p = document.createElement('p');
const strong = document.createElement('strong');
strong.textContent = login;
p.append(strong, ' ' + message);
document.getElementById('zone').prepend(p);

Answer 2

Вы можете использовать свойство Node#firstChild и метод Node#inserBefore, поэтому он не будет воссоздавать существующие дочерние элементы.

// create the `p` tag and set its HTML content
const p = document.createElemnt('p');
p.innerHTML = '<strong>' + login + '</strong> ' + message ;

const ele = document.getElementById('zone');
// insert the created p tag element before the first element
ele.insertBefore(p, ele.firstChild) ;

Answer 3

Вы должны добавить его в начало строки следующим образом:

var zone = document.getElementById('zone');
const content = zone.innerHTML;
zone.innerHTML = `<p><strong>${login}</strong>${message}</p>` + content;