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

我是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);


    };

函数plaatsMagnet（）
{
控制台日志（'plaatsMagnet'）；
$（“#magnetcontent”）。前缀（“”）；
var textmagnet=$（'#textmagnet'）.val（）
var naammagnet=$（'#inhoud'）.val（）
变量
divTag=document.createElement（“div”）；
divTag.id=“magnetje”；
divTag.className=“面板”；
divTag.innerHTML=“”+（naammagnet）+“+”“+（textmagnet）+“
”；
$（'#magnetjes'）.append（divTag）；
};

我真的希望你们能帮我！：）

jescont=0；//将保留magnetjes Div的柜台
jeCount=0；//将为magnetje Div保留柜台
//所有ID都是唯一的，magnetjes0，magnetjes1。。。。还有magnetje0，magnetje1。。。
//如果你可以保留一个数组，它会更好。
//我将计数器作为全局变量来显示每个div的不同id实现。我认为您应该将这种更改封装在函数中。
函数plaatsMagnet（）
{
控制台日志（'plaatsMagnet'）；
$（“#magnetcontent”）。前缀（“”）；
var textmagnet=$（'#textmagnet'）.val（）
var naammagnet=$（'#inhoud'）.val（）
变量
divTag=document.createElement（“div”）；
divTag.id=“magnetje”+jeCount；//将增加当前值和
jeCount++；
divTag.className=“面板”；
divTag.innerHTML=“”+（naammagnet）+“+”“+（textmagnet）+“
”；
$（'#magnetjes'+jescont）.append（divTag）；
jesCount++；
};

为什么给所有div都提供相同的ID？嗨，阿莫·塔帕利卡尔，因为我不知道如何使用javascript创建不同的div。你会怎么做？我用你的代码更新了tester2。我把我所有的脚本都放在了头上，我把下面的函数粘贴到了主体中，现在它可以工作了。每个创建的div都是唯一的。非常感谢你！现在，我希望解决为什么新的html不能以正确的宽度分解的问题。你知道是什么原因导致了这个巨大的塔帕利卡吗？为这个分区提供一个固定的宽度。你做到了吗？阿莫，非常感谢！）我复制了您的代码，但当我运行javascript时，没有创建任何内容。我应该放在哪里：jescont=0；jeCount=0？它现在在我的documentready函数中，只需确保它们是全局的，并且在调用plaatsMagnet之前声明。基本上你的id名称应该是不同的。这个计数器将是名称中的后缀。好的，我做了，我再试了一次。它似乎不起作用？我把它上传到了，因为你可以看到没有任何东西被创建。我现在有点明白了。。我正在努力让它工作！可能字符串中的某个地方有错误？“”）；也许现在它这么说：？是的。应该是双引号应该在我们加上jesCount之后。

 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++;


};