使用jQuery插入新div块的步骤
如下：
- 引入jQuery库：在HTML文件中，通过
<script>标签引入jQuery库，可以使用CDN链接或者本地文件引入。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>- 创建新的div元素：使用jQuery的
$()函数创建一个新的div元素，并可以设置其属性、样式等。
var newDiv = $("<div></div>");
newDiv.attr("id", "myDiv");
newDiv.css("background-color", "red");- 插入新的div元素：选择要插入的目标元素，并使用jQuery的插入方法将新的div元素插入到目标元素中。
$("#targetElement").append(newDiv);其中，#targetElement是目标元素的选择器，可以是元素的ID、类名、标签名等。
- 完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Insert New Div using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var newDiv = $("<div></div>");
newDiv.attr("id", "myDiv");
newDiv.css("background-color", "red");
$("#targetElement").append(newDiv);
});
</script>
</head>
<body>
<div id="targetElement"></div>
</body>
</html>以上是使用jQuery插入新div块的步骤。jQuery是一个快速、简洁的JavaScript库，广泛应用于前端开发中，可以方便地操作HTML元素、处理事件、执行动画等。在腾讯云的产品中，与前端开发相关的产品包括云开发（https://cloud.tencent.com/product/tcb）和小程序云开发（https://cloud.tencent.com/product/wxcloud）等。
相关·内容
2回答
我使用的是插件，我所做的是创建html结构：
<div id="resources_list"></div>
我导入了必要的文件以包含它：
<link rel='stylesheet' href="jquery.jscrollpane.css"/>
<script src="jquery.min.js"></script>
<script src="jquery.jscrollpane.min.js"></script>
<s
浏览 3提问于2016-12-17得票数 1
回答已采纳
我将以下HTML代码存储在javascript字符串中:我使用来自google CDN的Jquery 1.6.1
Console.log(字符串)：
<a><div class='product-autocomplete-result'>
<div class='cell img'>
<img src='http://beta.prizzm.com.s3.amazonaws.com/uploads/product_image/image/1/thumb_serr
浏览 4提问于2011-07-06得票数 2
回答已采纳
我发现了这个jquery插件，除了IE之外，它工作得很好。
如果我在代码中插入If滑块，jquery幻灯片切换失败。
<div>
<span><a href="#" class="tabbutton" id="tabbtnA">Visual</a></span>
<span><a href="#" class="tabbutton" id="tabbtnB"&g
浏览 2提问于2011-12-04得票数 0
我有一个jQuery可排序元素和另一个可拖动元素。通过使用可排序的接收事件，我获得了新插入的对象，并启动了ajax查询，将其写入数据库。但如果能找到新元素的正确位置，那就太好了。当我在接收事件上触发可排序(“序列化”)时，新元素不在字符串中。如何找出插入元素的位置？
可拖的：
<div id="docP1" class="docPopC">';
for($x = 10; $x<30; $x++){
if($block_ele[$x])
echo '<p id="b_
浏览 2提问于2010-06-25得票数 1
1回答
我正在使用创建web应用程序。树是基于Golang后端的数据构建的。树形树叶在应用程序运行时更改自定义图标。如何在不刷新页面的情况下根据后端数据更改图标？
随着http-equiv=“刷新”页面的闪烁和失去焦点。下面是使用zTree和refresh的示例(为了简单起见，我切割后端部分)：
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refres
浏览 4提问于2020-12-25得票数 0
回答已采纳
base.html.twig
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% block stylesheets %}
<!-- Style
浏览 0提问于2018-07-19得票数 0
回答已采纳
3回答
title最初是隐藏的。
它的css改变了(点击btnview)，但是新插入的title (点击btninsert)不可见？
如何通过插入让它自动可见(如果之前点击了btnview )？
当然，这可以由$('.title').show()完成，但是$('.title').css(...)函数的用途是什么呢？
$('.btnview').on('click', function(){
$('.title').css('display', 'block');
});
$('
浏览 32提问于2018-12-14得票数 0
回答已采纳
正如您所知道的，在jQuery中，我们可以组合方法。但在这里我有个问题。
$('div').after('<span class="text-warning" >SPAN</span>').html('test');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>DIV</div>
.html在d
浏览 3提问于2016-09-03得票数 0
回答已采纳
在我的结账页面中选择付款方法时，有人知道我如何包括一个块信息吗？在这个块中，我想从我正在使用的支付网关中插入一个html(图像)。
我尝试使用jquery插入页面加载时所需的html，图像很快就会出现，但是签出页面布局中的某些更新会删除图像，即图像出现后不久就会消失。
我是马根托的新手，欢迎你帮忙，谢谢。
我用的是magento 1.8.1
浏览 3提问于2014-08-06得票数 0
2回答
Jquery方法用于在所选元素之后插入after()元素。我的代码是
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Jquery代码：
$( ".inner" ).after( "<h2>Greetings</h2>" );
上面的代码运行良好。Jquery在两个div标记之后
浏览 1提问于2016-08-13得票数 1
3回答
我是jQuery和javascript的新手。在我的应用程序中，我有一个用户列表。当从列表中单击某个特定用户时，div元素将动态替换为有关该用户的详细信息。当单击另一个用户时，我再次用这个用户详细信息替换相同的div元素。因此，一次只能看到一个用户的详细信息。
我使用jquery，所以上面描述的代码看起来像这样。
$('table#moderate_users tr').click(function() {
$.get('/moderate/user/'+uid, function(data){
`$('div.user_info').
浏览 2提问于2010-01-31得票数 2
回答已采纳
2回答
我必须在静态块中插入php文件的输出。因为我不能直接将php代码写入块中，所以我编辑了一个名为disp_med.php的外部文件。
例如：
<?php echo 'hello'; ?>
从静态块中，我必须调用disp_med.php。我已插入(到CMS静态块中)：
<div id="dispmed"></div>
<script>
var url='http://example.com/app/design/frontend/ultimo/default/template/catalog/product/d
浏览 1提问于2015-03-12得票数 0
我的任务：
将元素插入Dom 中，然后再插入特定元素
将新插入的元素作为jQuery对象返回
新插入的元素不能有Id或任何东西，选择它的唯一可靠信息是它是在其他特定元素之前插入的。
使用.insertBefore方法插入元素很容易：
var result = $('#myInsertPosition').insertBefore('<div>newInsert</div>');
这给了我们一个这样的Dom：
<div>newInsert</div>
<div id="myInser
浏览 4提问于2013-10-04得票数 0
回答已采纳
2回答
您能告诉我，如果我插入新数据并删除旧数据(插入表顶部，删除底部行)，表中的MySQL数据是否会在物理上支离破碎？
在我优化之前，桌子的大小会以任何方式增长吗？
浏览 6提问于2016-02-02得票数 0
回答已采纳
假设下面的示例：
let html = `<Parent customAttr={ value }>
<Child className="container" />
</Parent>`;
let div = document.createElement('div');
div.innerHTML = html;
// or
div.insertAdjacentHTML('beforeend', html);
console.log(div);
当将html变量作为div的innerHTML插入时
浏览 10提问于2022-09-25得票数 1
回答已采纳
1回答
我想要插入一个图像标记到一个文本块中，以便图像在DIV中向下100像素。
<div>
A lot of text in a text block and a <img tag> somewhere
that is floated left or right and positioned inside the text block
</div>
因此，上面的标签放在要浮动的文本块中，以便将其定位在DIV中的100 it下。现在，这不能静态地完成，它必须用javascript来完成，因为div中的100 to可以通过不同的文本表示，这取决
浏览 2提问于2009-11-12得票数 2
我正在使用react和jquery步骤，我在我的render方法中有这个
<div refs="checkboxContainer" id='wizard-1'>
<h1>First Step</h1>
<div>
<LoremIpsum query='5s' />
</div>
<h1>Second Step</h1>
<div><LoremIpsum query='5s' /></div>
<
浏览 1提问于2016-12-19得票数 3
在Wordpress文章/页面中使用jQuery (没有断行并且在jQuery的兼容模式下)，为什么我可以插入任何纯文本，而不能直接插入html tag，例如使用适当的jQuery方法(html)的<p>或<table>？
例如，在Wordpress中，以下代码不起作用：
$(".div_import_text").html("New text");
$(".div_import_table").html("<table><tr><th><p>1</p>
浏览 4提问于2016-12-14得票数 0
我试图模仿的行为，MATLAB的Simulink 块只是MATLAB的代码。
我的代码如下(不熟悉持久性变量？)：
function out = fcn(u,delta)
persistent y;
if isempty(y)
y = 0;
end
if u >= delta
y = 1;
elseif u <= -delta
y = 0;
end
out = y;
当我查看输出并与真正的中继块进行比较时，我看到：
这种区别从何而来？
两个块插入相同的采样时间，继电器块是否有额外的东西来显示不连续性？
浏览 5提问于2014-01-07得票数 2
1回答
让我们假设我有一个带有这个div的页脚，为此我创建了一个名为custom_footer的自定义块：
{% if page.custom_footer %}
<div class='footer' style='background-image:url('/images/bg.jpg')">
</div>
{% endif %}
现在，我想将链接放在使用Home > Administration > Structure > Menus > Add menu创建的页脚中，换句话说，我不想在页脚div
浏览 0提问于2017-06-29得票数 0
回答已采纳
我正在尝试使用jQuery动态生成一组嵌套的无序列表。对于嵌套的<ul>，<li>是作为同级插入的，而不是作为子级插入的。
下面是一个简单的复制，它显示了这个问题：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous
浏览 1提问于2018-05-08得票数 0
回答已采纳
2回答
我有一个不断变化的div的数量，我需要一个特定的div在最后...我想以某种方式使用javascript或jquery计算div的数量，并在最后插入一个特定的div……例如
<div class="message" id="1">
<div class="message" id="2">....
<div class="message" id="88">
然后我需要最后的div号，并在上面加一个，这样它就会插入到最后。
<div class="m
浏览 0提问于2013-04-20得票数 3
回答已采纳
HTML：
<div id="container">prepend to me</div>
<div id="event">Event Here<script>alert('Fired');</script></div>
JS：
$(document).ready(function(){
$('#container').prepend($('#event'));
});
演示:切换到jQuery 1.9或更高版本的似乎可以解决这个问题。
浏览 2提问于2014-07-15得票数 2
问题: jQuery移动主题不适用于新插入的动态表单。表单被插入到<div id="formSuccess">中，没有任何问题。表单是从PHP脚本生成的，项目使用jquery.Mobile1.0b1&jQuery1.6.4生成。
var jqxhr = $.post("getForm.php"，{ form: tempVar}，函数(数据) {$("#formSuccess").page()；$("#formSuccess").html(data)；// $(“#formSuccess”).page(“刷新”)
浏览 5提问于2012-02-24得票数 2
回答已采纳
2回答
我在用jQuery插入文件输入元素时遇到了问题。我想要发生的是，当用户使用输入元素选择一个文件时，jQuery应该隐藏该输入，并在其位置插入一个新的文件输入。
下面是我的相关标记：
<div id="select_images">
<input type="file" name="images[]" multiple="multiple" />
</div>
还有我的Javascript：
$('#select_images input').change(function
浏览 0提问于2011-08-24得票数 2
回答已采纳
1回答
我有一个非常简单的装载器，就像这个。
<i class="icon-refresh icon-spin"></i> //font awesome
我在所有ajax请求上都使用它。ajax请求的响应使用.html()插入到请求本身定义的不同dom元素中，它可以通过最小的div作为整个页面。
我的问题是，我希望将加载器始终定位在目标元素的中间，中心宽度和中间高度。
有什么想法吗？
浏览 1提问于2013-03-22得票数 0
回答已采纳
我在一个网站上工作，每个网页上都有很多表格。我想在顶部添加一个滚动条。我搜索并发现：现在，我尝试调整它，以便每个表得到它自己的滚动条。这就是我到目前为止所做的：
jQuery( document ).ready(function(index) {
var base ='thescroll wpt'
var thediv ='thedivfix thediv'
var counter=0;
var theclass= base+counter;
var theinnerdiv = thediv+counter;
jQuery('table.tablepre
浏览 0提问于2014-07-10得票数 0
回答已采纳
我对Wordpress Gutenberg积木很陌生。我创建了一个图片库插件，我希望用户能够通过从弹出窗口中选择所需的库来插入图片库短代码。我使用jQuery text()函数从弹出窗口成功地注入了短代码，但是内容不会被保存。但是，当我输入一些文本时，一切都很好。
这是我的古腾堡js：
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
RichText = wp.editor.RichText,
blockStyle = { backgroundColor: '#000
浏览 1提问于2019-02-21得票数 0
回答已采纳
5回答
如何使用jQuery插入容器div？
从…
<div id="page">
`<!-- a bunch of html and content !-->`
`</div>`
至
<div id="page">
`<div id="new-container">`
`<!-- a bunch of html and content !-->`
`</div>`
`</div>`
浏览 0提问于2012-02-11得票数 2
回答已采纳
我有一个WP循环，每个帖子有4个国家的图像集合(使用ACF)。
我只想输出一个国家的图像，但它是显示所有4张图片的每个帖子。
<?php
$args = array( 'post_type' => 'quick_links', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
$image_au = get_field("au_image&#
浏览 2提问于2017-09-25得票数 0
回答已采纳
我有一个根据它们的ID来显示div的解决方案，但我希望它淡出。
由于页面的复杂性以及它位于WordPress内部的事实，我想修改这个DOM函数，使其包含一个慢速(“.show”)，以使工作中的淡入淡出，而不是整个页面的重构。
代码如下：
CSS块
<style>
.biobox { display:none;}
</style>
要插入jQuery的JavaScript To FadeIn var visibleDivId =“一”，“二”；var div= null；
function toggleVisibility(divId) {
if(visibleD
浏览 2提问于2014-12-19得票数 0
1回答
找不到我的问题的解决方案，所以我会在这里询问。
当我插入jQuery文件时，我在第2行得到一个错误:意外的标记非法
代码：
jQuery(document).ready(function(){
$('body').append('
<div id="style_selector">
<div id="style_selector_container">
// another chunk of code
</div><!-- #
浏览 5提问于2013-05-05得票数 2
回答已采纳
2回答
考虑下面的JSFiddle，它使用jQuery的slideToggle (即slideUp或slideDown)来显示/隐藏输入元素：
顶部输入在上下滑动时看起来摇摇晃晃的，因为我直接滑动元素。
第二个输入看起来要好得多。
我可以得到第二个效果，但没有额外的div吗？
允许jQuery。不喜欢通过JavaScript动态插入额外的div；希望我能做一些更好的事情。
浏览 0提问于2012-03-02得票数 1
回答已采纳
我想添加一个javascript google广告，但我不能使用jquery将javascript插入div。我试着用这个测试来模拟我的问题，这个测试使用了我在stackoverflow上找到的一些建议，但它不起作用。
我希望将<script type='text/javascript'>document.write('hello world');</script>插入到div中，并在tag_1和tag_2之间显示"hello world“。
代码如下：
<html>
<head>
&l
浏览 0提问于2010-08-06得票数 3
回答已采纳
当将textarea值插入到db中时，它会将用户enter转换为\n\r，当我想在站点上显示这个值时，它也会显示在视图中的\n\r中，并且在提交中，我尝试转换这个字符，但不起作用。我通过jquery ajax提交我的表格。
$safetext = mysqli_real_escape_string($connection, $_POST["describtion"]);
$safetextformat = nl2br($safetext);
结果：
sdfsdf\r\nsdf\r\nsdf\r\nsdf\r\nsdf\r\ns\r\ndf\r\nsdf\r\n\r\n\r\n
浏览 1提问于2017-11-04得票数 0
2回答
我在一个div中插入了一个YouTube视频，它可以很好地播放。但我希望能够在视频的某个地方单击并从DOM中删除嵌入代码，这样div就可以回到插入嵌入代码之前的状态，YouTube视频和播放器就完全消失了。
我知道有一个YouTube JavaScript应用程序接口，但这似乎只是让你发送命令，如停止，暂停，播放，到播放器。我想完全消除播放器，并从DOM中删除iframe似乎是最好的方法。
问题是，我在YouTube播放器上点击的任何东西都会被播放器截获，所以我永远不会在我的JavaScript或jQuery中收到点击。有没有办法让我感觉到JavaScript或jQuery上的YouTube播
浏览 0提问于2014-05-26得票数 0
1回答
我对以下场景的效果很好奇：
假设我正在定义一个jQuery单击事件，例如
$(function()
{
$('.someElement').click(function() { /*do something*/ };
};
它被加载到任意的HTTP GET请求中。
但是当请求时，这个.someElement最初并不存在于DOM中。
现在，如果我还有一个异步的AJAX调用，它插入了一些具有定义了这个html的.someElement的片段，例如
$.ajax(
{
//options omitted for readability
success: fun
浏览 0提问于2016-10-05得票数 0
回答已采纳
在添加几个元素时，我怀疑w.r.tjQuery追加()行为。
如下例所示，示例：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText()
{
var text1=$("<a></a>").text("Text1."); // Create text w
浏览 1提问于2014-02-06得票数 0
回答已采纳
1回答
因此，我试图使用jQuery实现延迟滚动，方法是在需要时从server.So中获取项--这就是我要做的。
检测页面的末尾，进行服务器调用以检索N个更多的项。
然后清除div，加载项目，并将scrollTop设置为div顶部。
当用户想要返回时，请再次阅读前面的清单，进行服务器调用以检索项目。
这是简短的代码。
if ((scrollHeight - scrollPosition) / scrollHeight === 0)
{
//end of the page,scrolling down retrieve N more listings
浏览 4提问于2015-10-14得票数 0
回答已采纳
MongoDB复制集+分片，当我停止插入数据后，数据库中的收集计数一直在变化，这是为什么？
浏览 0提问于2017-01-12得票数 0
2回答
我一直在检查我的代码，试图整理它，我只是厌倦了我写jQuery的方式，当它需要从页面复制html时。我的意思是：
我有一个页面的一部分，它像论坛一样循环通过帖子(我的实际代码更多的是html )：
<? foreach ($posts as $post): ?>
<div class="post">
<div class"post_details">
<a href="<?= $post->link ?>"><?= $post-
浏览 0提问于2013-01-11得票数 1
回答已采纳
我目前使用javascript/jquery从div中动态创建的一组指令中‘添加和删除’步骤。
function add(){
var id = document.getElementById("hiddenCount").value;
$("#myId").append("<div id='step"+ 'id' + "...onclick='delete('"+id+")"...);
id = (id -
浏览 2提问于2011-03-31得票数 1
回答已采纳
我很好奇如何编写一行代码来获取每个div，并使用jquery将其内容包围在标牌标签中。例如，我希望它能
<div class="foo">Hello <div class="bar">World</div></div>
把它变成
<div class="foo"><marquee>Hello <div class="bar"><marquee>World</marquee></div></marquee&g
浏览 4提问于2016-06-27得票数 1
回答已采纳
我正在处理一个使用jQuery的网页。我有一个Ajax调用，它从服务器获取数据并更新div。在数据内部有一个jQuery函数，但在将数据加载到页面后不会调用该函数。我已经在页面中包含了适当的js文件。
下面是从Ajax调用返回并放入div中的内容：
<script type="text/javascript">
$(function() {
$('input').myFunction('param');
});
</script>
<p> other
浏览 0提问于2008-10-25得票数 21
回答已采纳
3回答
我有以下用于插入新DOM元素的jQuery代码。本例中的someHTML只是一个超文本标记语言字符串。比如<div>text</div>。
$area.prepend(someHTML);
我希望在将节点插入到DOMTree中之后，通过正确设置parentNode和诸如此类的内容来获得对该节点的引用。
像.find()和.filter()这样的jQuery过滤器函数不适用于我的情况，因为它们都创建了新的jQuery对象。我需要对DOMNode的实际引用。
有什么想法吗？
浏览 1提问于2011-06-16得票数 0
我有一个可排序的列表(不是jQuery UI可排序的，只需简单地点击按钮)。通过after()向右排序工作得很好，但是用before()向左排序不起作用。
首先，守则：
Html
PhotoList:
<ul class="PhotoList">
<li>
<div class="ThumbWrapper">
<img src="images/img_testphoto.jpg" />
</div>
</li>
浏览 4提问于2012-08-10得票数 0
回答已采纳
我想在我的网页中显示一些apache统计数据(每小时累积访问)。因此，我将jQuery与chart.js结合使用。
现在，我希望通过ajax (带有加载图标)填充每个图表。
首先，我通过php创建div的alle，同时：
<?php
$SQL = $mysqli->query("SELECT * FROM server ORDER BY vname ASC");
$count = 0;
while ($row = $SQL->fetch_assoc()){
$count++;
浏览 2提问于2015-08-11得票数 0
回答已采纳
1回答
我使用像这个这样的jquery来创建快速标记。快速标记存储在一系列div标记中，如下所示
<div id="taglist">
<div class="tag">
<a class="close">x</a>
Red
</div>
<div class="tag">
<a class="close">x</a>
Blue
&l
浏览 2提问于2016-02-22得票数 0
回答已采纳
1回答
$('.parent').sortable({
containment: "parent",
tolerance: "pointer",
axis: "x"
});
$('button').on('click', function(){
var str = $('#store').html();
$(str).insertBefore($('.parent').eq(0));
});
.parent{
background:silver;
ma
浏览 0提问于2018-12-13得票数 0
回答已采纳
我试图在复选框之前插入一个颜色div，使用.before()的jQuery 1.5.1方法，该方法在FF、Chrome、IE8+上运行良好；但是对于IE7，插入的颜色div与复选框不在一行。我希望有人能给我任何建议。谢谢。所附代码：
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<input type="checkbox" id="check1" />PINK
<script type=
浏览 7提问于2011-11-09得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
