HTML JS，在 html 正文中添加一个新的 div

Posted 2023-02-25

【中文标题】HTML JS，在 html 正文中添加一个新的 div

【英文标题】：HTML JS , Append a new div to html body

【发布时间】：2021-10-24 10:01:43

【问题描述】：

我想在 html 文件中添加一个用 js 创建的新 div。我使用 cpanel 作为存储。

html

<div class="row onerow"></div>

js

 $( "<div></div>" ).appendTo( ".onerow").addClass("col")

我想保存我刚刚在 html 正文上创建的新 div。现在该 div 在页面刷新时被删除。

全文：我必须创建一个包含单行画廊的网站。我想创建一个脚本，管理员可以在其中上传照片，并且该照片将作为新的 col 加入行。上传准备就绪，但现在我必须弄清楚如何将 col 保存到 html 正文。谢谢您的时间！

【问题讨论】：

onerow 在您的示例中不是一个类。这是一个属性 - 因为缺少引号。

类的语法是 class="className" 。添加引号

是的，对不起，已编辑

javascript，至少以 Web 浏览器脚本的形式，并不是您能够对网站进行永久更改的方式。您需要研究服务器端编程，其中服务器端代码可以保存提交的数据并更改在后续访问中提供给每个访问者的 HTML。

感谢@LawrenceJohnson 的回复，你能告诉我哪个对初学者更容易吗？

【参考方案1】：

首先你有一点 html 错误。

你应该改变你的 div 如下

<div class="row onerow"></div>

还有你的 jQuery 代码：

$(document).ready(function() 
  $('.onerow')
    .append('<div>new div</div>')
    addClass('abc');
);

这里是您的案例的演示https://jsfiddle.net/gfLajh07/

【讨论】：

讽刺...缺少.

请注意，$(selector).append(newhtml).addClass(..) 会将类添加到 original 选择器，而不是新的 html。 jsfiddle.net/e9ynmo3w 使用 $(newhtml).appendTo(selector).addClass(...) 将添加到 newhtml

另请注意，这甚至没有尝试回答如何在页面刷新时“保存”新 div 的问题。

【参考方案2】：

您需要修复class 包含在" 中的属性：

<div class="row onerow"></div>