javascript - 为什么我的 innerHTML 会覆盖父类的样式属性？我该如何解决这个问题？

Question

我是 Aron，我是 javascript 的新手

这是我的问题：

我正在尝试从我的 html 中的表单输入创建新内容，但是如果您在表单中输入许多字符，新的 html 不会以正确的宽度分解。

我希望我正确地解释了这一点。这是我网站的链接

这是我的javascript：

function plaatsMagnet()
    {

        console.log('plaatsMagnet');

        $('#magnetcontent').prepend('<div id="magnetjes" class="large-3 columns"></div>');

        var textmagnet = $('#textMagnet').val()
        var naammagnet = $('#inhoud').val()



        var 

        divTag = document.createElement("div");

        divTag.id = "magnetje";

              divTag.className =" panel";

              divTag.innerHTML =   "<h5>" + (naammagnet) + "</h5>" + "<p>" + (textmagnet) + "</p>";

        $('#magnetjes').append(divTag);


    };

我真的希望你们能帮助我！:)

Answer 1

 jesCount = 0; // will keep the counter for magnetjes divs
 jeCount = 0; // will keep the counter for magnetje divs 

 // All the ids will be unique, magnetjes0,magnetjes1.... and magnetje0, magnetje1...
// if you can mantain an array instead it will be better.
// I have taken counters as global vars to show different id implementations for each div. I deally you should encapsulate such change in a function.

function plaatsMagnet()
{

    console.log('plaatsMagnet');

    $('#magnetcontent').prepend('<div id="magnetjes'+ jesCount +'" class="large-3 columns"></div>');

    var textmagnet = $('#textMagnet').val()
    var naammagnet = $('#inhoud').val()



    var 

    divTag = document.createElement("div");

    divTag.id = "magnetje" + jeCount; // will increment the current value and 
          jeCount++;
          divTag.className =" panel";

          divTag.innerHTML =   "<h5>" + (naammagnet) + "</h5>" + "<p>" + (textmagnet) + "</p>";

    $('#magnetjes'+jesCount).append(divTag);
     jesCount++;


};