重构js以编程方式在div中追加内容
可以通过以下步骤实现：
- 首先，获取要追加内容的div元素。可以使用JavaScript的getElementById()方法，传入div的id来获取该元素。例如，如果div的id为"myDiv"，可以使用以下代码获取该元素：var divElement = document.getElementById("myDiv");
- 创建要追加的内容。可以使用JavaScript的createElement()方法创建一个新的元素，例如创建一个段落元素：var paragraphElement = document.createElement("p");
- 设置要追加的内容。可以使用JavaScript的innerHTML属性或者createTextNode()方法来设置元素的内容。例如，使用innerHTML属性设置段落元素的文本内容：paragraphElement.innerHTML = "这是要追加的内容";
- 将要追加的内容添加到div中。可以使用JavaScript的appendChild()方法将新创建的元素添加到div中。例如，将段落元素添加到div中：divElement.appendChild(paragraphElement);
完整的重构代码如下所示：
var divElement = document.getElementById("myDiv");
var paragraphElement = document.createElement("p");
paragraphElement.innerHTML = "这是要追加的内容";
divElement.appendChild(paragraphElement);这样，就可以通过编程方式在指定的div中追加内容了。
对于这个问题，腾讯云提供了云开发服务，其中包括云函数、数据库、存储等产品，可以帮助开发者快速构建和部署云端应用。您可以使用云函数来编写后端逻辑，使用数据库来存储数据，使用存储服务来存储文件等。具体的腾讯云产品介绍和文档可以参考以下链接：
请注意，以上只是腾讯云的一些产品示例，其他云计算品牌商也提供类似的产品和服务，可以根据实际需求选择适合的云计算平台。
相关·内容
2回答
有没有一种简单的方法来扩展下面的代码，以便在div.someclass不存在时自动创建它？
d3.select("body").select("div.someclass").selectAll("p")
.data([ 1, 2, 3 ])
.enter()
.append("p")
.text(function (d, i) {
return "index: " + i + ", value: " + d;
浏览 1提问于2013-11-01得票数 4
回答已采纳
上下文:我正在学习Javascript，很多实践代码都使用document.write()，但是我一直读到应该避免它，但是JS中的一些东西已经嵌入了document.write()
例如：
var i = 1;
do {
document.write ("Cool");
i = i + 500;
} while (i <= 10);
问:您是尝试用替代的document.write()方法(例如createELement或innerHTML)重写循环，还是只是尽力避免它的使用？
浏览 1提问于2022-04-11得票数 0
6回答
我想显示有关变量状态的不同HTML元素。
在我的HTML文件中，我有：
<div id="dustbinstatus"></div>
在我的JS文件中，我有：
if (message.payloadString == "full"){
$('#dustbinstatus').append('<i class="material-icons">delete</i>');
}
else if (message.payloadString == "em
浏览 0提问于2017-07-24得票数 0
我使用JS从这个对象中添加HTML中的部分：
var slidesArray = [
{
'id': 1,
'title': '1 title',
},
{
'id': 2,
'title': '2 title',
},
{
'id': 3,
'title
浏览 1提问于2020-09-11得票数 0
我的HTML：
<html>
<head>
<title>Circles!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script&g
浏览 5提问于2014-08-04得票数 1
选择2/3.5.2/
我重新发布这是因为我的初始帖子格式不正确。
目前正在使用下列项目：
可以在select2窗体字段中搜索多个记录
引导弹出模式有一个表单，如果在select2表单中找不到它，就可以输入新记录。
AjaxForm用于将新记录从模态表单传递到select2表单。
问题：
如果添加了第二条记录，它将替换传递给select2字段的第一条记录，而不是追加它。
当提交用于处理的select2表单时，它将传递在select2中选择的记录，而不是从ajaxform (模式)中添加的记录。
该模式没有明确表单值。
我对js和jquery很陌生，所以如果
浏览 8提问于2015-11-07得票数 1
回答已采纳
1回答
我有一个可折叠的动态生成，但是在调用.empty()并动态生成另一个可折叠之后，它将不可见为可折叠的。我只需要在.empty()事件之后正确地生成可折叠文件。
第一次动态地使可折叠：
在 .empty() 之后，并使第9次动态可折叠：
有些JS是如何创建可折叠的，然后追加按钮的：
function createButton(buttonText,hrefLink,onclk,id) {
console.log('=>'+onclk);
var button = '<a href="'+hrefLink+'
浏览 2提问于2013-12-05得票数 2
回答已采纳
因此，我尝试使用javascript动态创建文本框，它运行良好，但是当我尝试使用innerHTML显示文本框时，屏幕上什么也没有显示。
JavaScript代码：
var i = 1;
function instituteCreate(){
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("Name", "institute_" + i);
document.getElementById
浏览 5提问于2020-05-11得票数 0
回答已采纳
1回答
我最近开始学习AngularJS，但遇到了一个小问题。我试着在WebMatrix 3中使用代码语言，并使指令正常工作，但是表达式在网页中显示得不太好。在代码I中键入：
<p>{{ title }}</p>
然后在网页中显示：{{ title }而不是我编程的标题。
这是我剩下的代码。
index.html：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.mi
浏览 4提问于2015-04-10得票数 0
回答已采纳
3回答
是否可以在不指定选择器的情况下执行追加
因此，在html中，我有一个任意元素，在其中我调用了一个函数，该函数将以内联方式追加内容
所以html看起来像这样。
<!-- stuff before -->
<fieldset>
<script type="text/javascript">
$(document).ready(function(){
get_content();
});
</sc
浏览 0提问于2010-05-07得票数 0
回答已采纳
在使用Backbone.js中的视图时，我通常有以下几部分：
视图应附加在其中的目标元素，例如ul元素。
表示列表项的模板。
视图上的el元素，在本例中是li元素。
如果呈现视图，Backbone.js将创建li元素，然后通常将呈现的内容附加到目标元素，例如使用jQuery。
到现在为止还好。
我不明白为什么Backbone.js以编程方式创建li。为什么它不只是获取模板的内容并使用它来呈现呢？
对我来说，这似乎令人困惑，因为：
在周围的HTML页面中，我有一个ul标记。
在表示列表项的模板中，我要做的是，而不是，它有一个li标记。
Insted li是由B
浏览 3提问于2013-03-16得票数 2
回答已采纳
1回答
我已经设置了一个，它在将工具栏项附加到表容器的顶部时呈现得很慢。
我尝试的是获取容器的类，并在jQuery中添加到中。但是，这似乎不是渲染的有效方法：
$("#escalation").one("preInit.dt", function (evtObj, settings) {
var $newbtncontainer = $("<div class='dt-buttons'></div>");
$("#escalation_wrap
浏览 1提问于2017-03-07得票数 1
回答已采纳
3回答
动态添加内容到面板
、、、
可能的情况是我的javascript功能不够:)。
我正在尝试动态增强一个列表(通过javascript添加项目)到jquery移动面板中。下面的代码是该功能的工作(非工作)示例。整个项目的开销会有点太大(你需要一些串行连接的设备来运行它)。
它很好地向列表中添加了一个条目，但没有以适当的样式呈现它。
是不是我错过了什么把戏？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content
浏览 4提问于2013-05-21得票数 3
我有一个div和它自己的滚动条，它被AJAX (php文件)重新加载。当我在这个div中滚动并重新加载它时，内部滚动条将被发送回顶部。我希望滚动条保持在我最初滚动到的位置。
<style>
#div2 {
height: 400px;
width: 100%;
overflow-y:scroll;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<scr
浏览 4提问于2018-08-31得票数 0
回答已采纳
2回答
我们有以下文件：Action.php
<?php
$array = array(
0 => array(
'id' => "2",
'name' => "Start",
'password' => "start"
),
1 => array(
'id' => "3",
'name' => "M
浏览 2提问于2011-02-21得票数 1
回答已采纳
1回答
我正在尝试从db加载选定的值，并在select2上设置它。我使用的是select2 4.0.10版本。我使用ajax加载数据，并在文档准备好后将select选项设置为select2元素。
因此，我尝试使用$("#area").val(selectedValues).trigger("change")；，但似乎没有选择。
这是一些我的看法代码。
<input class="form-control" type="text" id="sourceValues" value="CMS,KDY,RWG"
浏览 3提问于2019-10-04得票数 1
回答已采纳
1回答
我试图使用一个内容脚本将一个DIV注入到一个网页中，然后异步地将Google加载到这个DIV中。为此，我使用了上给出的最小示例
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadScript() {
浏览 0提问于2014-05-27得票数 2
回答已采纳
2回答
我需要在div中附加一个html文件。
在执行jquery html()时，它删除了html & body标记。
如何保留这些标签？
请参考以下代码片段：
$('.html-file').html('<html><p>Hello</p></html>'); //it is removing html tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></s
浏览 0提问于2017-11-09得票数 1
假设我有这样的事情：
<head><script src="script1.js" ...></script></head>
<body><div id="div1"></div></body>
，我称之为index.html，div1 1的内容是动态加载的，如
$("#div1").html ("div1.html");
其中，div1.html是类似于
<div id="div2"><canvas
浏览 1提问于2012-04-15得票数 1
回答已采纳
我的html文件中有一个textarea，.js文件向它添加了几行文本。我想要线条的颜色不同。因此，我想用span/div标记包装这些行(以便为每一行设置不同的颜色)，并将它们插入到我的文本区域。
我的文本区是：
<textarea class="history" cols="150" rows="5" readonly="true"></textarea>
我的.js代码是：
var div = document.createElement('div');
div.setAttribut
浏览 2提问于2017-10-16得票数 0
1回答
在我的应用程序中，我有一个注释系统，它将评论显示为一个集合，我已经让ajax注释正常工作，但目前它再次呈现整个集合，但我想要的只是附加最新的评论。这是我的密码：
comments_controller.rb
class CommentsController < ApplicationController
before_filter :authenticate_member!
before_filter :load_commentable
before_filter :find_member
def index
redirect_to root_path
end
def new
浏览 1提问于2014-07-09得票数 2
回答已采纳
我有一个简单的工作，在页面加载后填充它。以下代码工作正常：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javas
浏览 2提问于2014-11-06得票数 0
回答已采纳
简介：我们正在重新设计我们的应用程序体系结构，我们即将做出重要的设计决策。
背景和依赖关系：所有数据都存储在分布式MySQL数据库中。我们有两个访问数据库的系统--一个执行常规任务，用Java和我们的web应用程序编程--目前是Apache2、Zend1框架和JavaScript (jQuery)。
Java应用程序不会被重新设计，数据库应该保持为MySQL。
web应用程序应该改为REST和一个现代的、快速的、实时的AngularJS前端，通过JSON进行通信。
由于我们已经在PHP中编写了所有后端功能，所以坚持使用PHP的REST可能是有意义的--但如果它能使将来的开发变得更容易、更快和更
浏览 3提问于2014-07-30得票数 4
回答已采纳
我有一个web组件，如下所示：
文件: download-bar.js (web组件)
class DownloadBar extends HTMLElement {
constructor() {
super();
this.shadowDOM = this.attachShadow({mode: 'open'});
}
connectedCallback() {
this.render();
}
render() {
this.shadowDOM.i
浏览 2提问于2020-08-01得票数 0
我正在制作一个react js应用程序。在这个应用程序中，我知道我在一个标记中有一个标记，如下所示： <a><a></a></a> 正如您在这些图片中所看到的，我已经找到了问题所在。但是我无法解决这个问题。如果有人能帮我一把，我将不胜感激。 ? 被注释掉的代码就是我的问题所在。正如你所看到的，我有一个Link标签，在那个Link标签里面，我有一个Dropdown标签。下拉列表是导致问题的原因，但我的应用程序需要它。 ? 编辑： 我知道一个a-tag不能存在于另一个a-tag中，我已经尝试了几种不同的方法来充分利用下拉列表
浏览 25提问于2021-09-15得票数 0
1回答
获取所有ALT标签
、、、
我希望在div中获取每个图像的alt标记，并将它们列在<ul><li>中，但我不希望重复alt。例如，如果两个imgs有alt "example1"，我希望它只在我的<ul><li>上列出一次。
我现在的代码是：
JS
$('.img-produto > img').each(function(){
$('.filters').append('<li>'+ $(this).attr('alt') +'</li>');
浏览 2提问于2016-07-06得票数 0
回答已采纳
2回答
我想知道是否有人可以自动和编程地自动加载HapiJS路由。我在寻找一种类似于特定资源下的路由的方式，这些路径都是以该资源命名的js文件。
例如，如果我有一个文件src/routes/account.js，它将有路由/login和/register，这将创建API路由/account/login和/login/register。或者让我有一种自动加载路径的编程方式。
我使用加载我的控制器，我希望使用类似的东西。我没有看到任何可以做到这一点，所以我想我想问一下是否有人已经有这样的方法了。
谢谢!
浏览 1提问于2016-03-11得票数 0
回答已采纳
在Ember.js的0.9.3版本中，我可以这样做：
Item = Ember.Object.Extend({
title: 'A cool item',
subview: Ember.View.extend({
templateName: 'views_items_show'
})
});
var item = Item.create(jsonData);
var itemIndexView = Ember.View.extend({
templateName: 'views_items_index',
item
浏览 0提问于2012-03-30得票数 1
回答已采纳
1回答
我正在使用cakephp 1.3.6，并尝试使用内置的js helper。我已经添加了
var $helpers = array('Js' => array('Jquery'));
在我的控制器里。在我的布局中，我已经包含了jquery文件，还包含了
echo $this->Js->writeBuffer();
在</body>标签之前。
我检查了jquery库是否正确，但尝试从jqueryui.com创建一个简单的accordian，它工作得很好。
但当我尝试的时候
<?php
$this->Js->g
浏览 0提问于2011-01-07得票数 0
我从afterRender github页面上阅读了有关fullpage.js的文档。在我的站点中，有一些内容是由AJAX在特定的div中生成的。
下面的例子
$("#fullpage").fullpage({
afterRender: {
// I don't know what to put here
}
});
$("#btn-generate-content").on("click", function() {
// Target the div
$.ajax({
浏览 0提问于2018-03-04得票数 2
操作系统: Windows 10专业版
React-router: 4.1.1
React: 15.5.4
因此，我在<Route />中执行条件检查，以确定authToken是否存在，如果不存在，则将用户重定向到登录，否则呈现关联的组件。但是，即使令牌存在，如果您重新加载根/或/view/:postId的页面，用户仍然会被重定向到登录页面。
我在这里超载了什么？
app.js
render () {
const SOME_PATH = window.location.pathname;
return (
<ApolloProvider
浏览 0提问于2017-06-14得票数 0
1回答
我希望从输入字段中获取文本，使用Ajax获取文本，将其发送到PHP，然后在div中的页面上显示它。
问题是，div，一次用文本，第二次，它替换它。
PHP：
<?php
$input = $_GET['input'];
echo "<div class='input'><strong>You:</strong><p> $input </p></div>"
?>
编辑:澄清。
我有一个文本字段(我们将称之为1)和一个div (我们将称之为两个)。
我将输入在1中的
浏览 5提问于2012-12-04得票数 0
回答已采纳
1回答
我有一个生成的表，看起来很好，除了表的标题没有与数据排成一行，任何帮助都将不胜感激。
代码获取JSON，然后循环遍历它，同时构建一个表，最后在HTML页面的div中显示它。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
margin: 0;
}
html,
body {
background-color: white;
font-family: arial, helvetica, verdana, sans-s
浏览 2提问于2013-02-19得票数 3
1回答
用Ajax创建图像
、、、
我使用的是一个引导主题，我希望通过AJAX加载主题图像显示页面上的图片库。在AJAX中，照片以JSON的形式出现，但我无法让它们显示在页面上。
画廊与原始JS文件中与主题相关的部分如下：
var productGallery = function () {
var gallery = document.querySelectorAll('.product-gallery');
if (gallery.length) {
var _loop8 = fun
浏览 7提问于2022-02-17得票数 0
1回答
我在关注
使用下面这样的静态div没有任何问题：
<div id="tabs" class="tabs" style="display:none;">
<ul >
<li><a href='#tabs-1'>First</a></li>
<li><a href='#tabs-2'>Second</a></li
><li&
浏览 0提问于2010-08-25得票数 0
回答已采纳
我正试图在我的网站上添加防火墙认证。但有个错误。我最近三天都在努力解决这个问题。下面我分享了我的代码和错误。我使用的是router，firebase身份验证系统和react。当我点击“使用谷歌登录”按钮时，它会在控制台中显示你好，这是正确的。但在那之后，我面临着这个错误。
错误是，
在useFirebase.js文件中，我编写了下面的代码
import React, { useEffect, useState } from 'react';
import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithP
浏览 2提问于2022-03-13得票数 0
我试图编写一个功能，如果我们传递作用域和模板，它应该在一个jQuery UI对话框中显示给定的模板，其中包含来自给定作用域的所有工作绑定。
以下是代码：
<div id="mainDiv" ng-controller="myCtrl">
<input type="button" value="show dialog" ng-click="showTemplateDialog()" />
</div>
<script type="text/ng-templa
浏览 6提问于2016-09-30得票数 0
1回答
我在更新Chrome中的web应用程序时遇到了问题。这是一个ASPX网站，但我不认为它与这次对话有关。问题是我们的客户端没有在Chrome中获得最新的编程，因为大多数时候，它无法从内存中释放Javascript和CSS编程，然后在使用时造成各种混乱。
我试着将这段代码放在<head>中，就像许多人建议的那样，但它并不总是有效。
<script type="text/javascript">
function reload_js(par_src) {
src = $('script[src$="' + pa
浏览 0提问于2016-11-15得票数 0
1回答
在这里，我从数据库中获取JSON格式的数据到我的.js文件中，我也在div中，我没有在我的HTML中获得div。谁能告诉我如何在我的超文本标记语言page.Please中显示page.Below是我的代码：
我的json数组：
[{"chat_question_id":"1",
"chat_question_title":"What is PHP?"},
{"chat_question_id":"17",
"chat_question_title":"what is p
浏览 0提问于2016-09-28得票数 2
我试图构建一个表，其中第一个单元格是一个图像，下一个单元格有一些值，标题在头中定义。问题是，在javascript中，对于循环的每一次迭代，它都会添加一个新行，尽管我没有使用<tr>。
fetch("./static/js/data.json")
.then(response => response.json())
.then(data => {
for (var j = 0; j < 10; j++) {
let imgsrc = data.data[j].image;
document.querySe
浏览 5提问于2022-10-27得票数 1
嗨，我在IBM v5.0.6中的WP7.5应用程序开发方面遇到了困难。我在我的实验中使用了来自的MultiPageApp项目。
我遇到了很多问题：
第一个问题
我在没有编辑代码的情况下在worklight中构建了WP7.5环境。然后在2012中使用模拟器7.1 256 MS运行它。问题只是从MultiPageApplication.html中出现的内容。
MultiPageApplication.html
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Ty
浏览 2提问于2013-07-31得票数 1
4回答
我有以下带有插槽的组件：
<template>
<div>
<h2>{{ someProp }}</h2>
<slot></slot>
</div>
</template>
出于某些原因，我必须手动实例化这个组件。我就是这样做的：
const Constr = Vue.extend(MyComponent);
const instance = new Constr({
propsData: { someProp: 'My Heading
浏览 2提问于2018-05-03得票数 20
回答已采纳
1回答
储存及打印日期
、、、
我需要使用陨石在mongodb中存储一个日期，例如" myDate“(这种格式为)，当当前日期=myDate时，我想要显示它。(我的项目是一个带有Note的列表！)
模板助手：
Template.dates_list.helpers({
dates: function () {
return Dates.find({}, { sort: { dateTime: +1 } });
}
});
模板事件：
Template.newDate_form.events({
"submit .js-save-newDate-form": function (ev
浏览 3提问于2016-02-12得票数 1
我正在尝试做一个附加菜单点击div。但我这里有一个问题。如何在第二次单击后删除附加的元素。在这方面有人能帮我吗？
这是来自的codepen.io页面
Js
$(document).ready(function(){
$("body").on("click", ".menu-button", function(event){
event.preventDefault();
$(".menu-container").append('<div class="button">
浏览 8提问于2016-04-06得票数 2
回答已采纳
在我的问题有意义之前，我需要解释几件事。在我的第一个页面上，我有一个主div，在那里我使用jquery load()方法从另一个页面加载标记。我加载的html链接到我的脚本所在的.js页面。js页面是我操作main div内容的地方。在我的js页面上，我循环遍历从数据库中提取的变量数组，并将它们附加()到main div中。在for循环中，我将每一行包装在其自己的div中，并包含一个锚标记。锚标记是我想要将click()方法附加到的标记，这样我就可以在单击函数时调用它。在其他选择器中，我已经尝试了parent > child选择器，但是没有一种方法适用于锚标记。我的代码：
//this
浏览 3提问于2013-04-29得票数 2
回答已采纳
2回答
我用div显示标题和段落。我在右下角有一个拇指向上的图片。我的意图是，当拇指向上点击，它将改变颜色和规模。但是，使用我的代码，当单击一个拇指向上时，所有拇指都会以相同的方式操作。
我使用Django模板，这里是一个模拟。我认为我的js文件有问题，请告诉我如何修复它。非常感谢。
var $icon = $(".icon");
$icon.on('click', function() {
if ($icon.closest("div").hasClass('anim')) {
$icon.closest("di
浏览 1提问于2018-01-02得票数 0
回答已采纳
1回答
我正在使用Ajax (JSON)解析数据，然后将其解析为如下模板：
function noteTemplate(obj) {
var date = obj.created_at.split(/[- :]/),
dateTime = date[2] + '.' + date[1] + '.' + date[0];
dateTime += ' @ ' + date[3] + ':' + date[4] + ':' + date[5];
var note = '&
浏览 3提问于2016-06-09得票数 3
我想使用带有动态构建形式的datepicker插件。当我用类datepick静态地构建表单时，jquery函数工作得很好，但是当我尝试使用jquery追加的文本输入构建时，jquery函数不起作用。这是我正在使用的代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author"
浏览 5提问于2014-05-22得票数 0
回答已采纳
1回答
我真的是新来的。希望这个标题是有意义的。
我的问题是:在我单击good.png或bad.png按钮后，js运行良好，但在我单击警告窗口中的OK后，图像将消失。在我刷新页面后，它会再次出现。
这是真实的代码页面：
我该怎么解决这个问题呢？非常感谢！
(为我的粗鲁语言道歉)
这是我的代码的一部分：
=========js function========
<script type="text/javascript">
$(function() {
$(".rate").click(function() {
var id = $(this).att
浏览 14提问于2014-03-17得票数 0
我的index.php有一个jquery ajax调用，它将getposts.php插入到我的#content div中。这个很好用..问题是getposts.php中有一些javascript (更多的jQuery)，虽然Chrome可以很好地执行代码，但火狐却不能。
如果我将setchecked.js_=1322020697832作为文件包含(setchecked.js)，firebug将查找javascript
如果我将javascript直接包含到getposts.php中，javascript将被完全忽略(它甚至不会出现在源代码中)
有人知道为什么和如何修复它吗？
index.php
浏览 0提问于2011-11-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
