Блог

Я пытаюсь создать js-функцию для добавления динамического DIV с некоторой конфигурацией.

Теперь у меня есть: HTML:

                   <div class="tooltip" >
                        <font class="textStyleInfo"><b>( i )</b></font>
                        <span class="tooltiptext" id="demo2">XXX</span>
                    </div>
<script>
    changeDemo("demo2",tooltiptext_controloSaldoCheckBox2);
</script>
  

JS:

 const tooltiptext_controloSaldoCheckBox2 = "My Text";
  

С помощью этого я могу изменить свой текст, но я буду использовать это так много раз на устаревшей странице, что предпочитаю создать более быструю js-функцию, которую я могу вызывать следующим образом:
HTML:

 <script> myFunction("NameDIV",tooltiptext_controloSaldoCheckBox2);</script>
  

Js:

 function myFunction(ID_CH, Var2){
var div = document.createElement('div');
div.innerHTML = "<font class="textStyleInfo"><b>( i )</b></font><span class="tooltiptext" id="" ID_CH "">" Var2 "</span>";
div.setAttribute('class', 'tooltip'); // and make sure myclass has some styles in css
document.body.appendChild(div);};
  

Но когда я вызываю ее, я не буду работать: s
Кто-нибудь может помочь?

Большое спасибо

Лучше не писать весь код в innerHTML. Лучше использовать это так:

 div.id = " ID_CH ";
div.classList.add("tooltiptext");
  

Шрифт тега устарел и его не следует использовать: https://developer.cdn.mozilla.net/en-US/docs/Web/HTML/Element/font

Лучше создавать разные теги по отдельности и добавлять их, чем записывать их все в innerHTML. Что-то вроде:

 let span = document.createElement('span');
span.innerHTML = 'I love it!';
div.appendChild(span);
  

Обратите внимание, что ваш код становится более структурированным, чтобы вы и другие могли его лучше понять.