草庐IT

javascript - 我需要在其中创建带有嵌套 div 的 div

coder 2023-08-11 原文

看代码

HTML 代码:

<div class="container content-rows" id="contentdisplay">
 <div class="col-md-1" id="snocontent">abcd</div>
 <div class="col-md-3" id="pgnamecontent">abcd</div>
 <div class="col-md-3" id="cmpcontent">abcd</div>
 <div class="col-md-2" id="datecontent">abcd</div>
 <div>
  <button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span></button>
  <button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span></button>
  <span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span>
  <span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span>
 </div>

Javascript 代码:

function createdivs() {
        var i;
    for (i = 0;i < 10;i++)
    {
        divc = "<div>.container.content-rows";
        var list = document.createElement("divc");
        document.body.appendChild(list);
        list.className = "proglist";

    }
}

我有几个问题，请澄清或用代码解释:

  1. 创建了 10 个 div，但其中没有其他 div 元素，只有第一个 div 中有一些内容..其他 div 刚刚创建，它们甚至不占用网页内的空间

  2. 我希望 div 与第一个 div 对齐，即，我需要类似 document.div.appendChild 的东西而不是 document.body.appendChild，而创建的 div 应该附加到第一个 div。 .

请让我知道我怎样才能得到他们的解释..提前谢谢你..

最佳答案

10 divc's are created but there are no other div elements inside them, only the first div has some content in it.. other divs are just created and they dnt even occupy space inside the webpage

空间未被占用，因为它们没有添加任何内容。您可以像使用 document.body 一样向元素添加内容 - 例如，appendChild()。

I want the div to be aligned to the first div, ie., instead of document.body.appendChild I need something like document.div.appendChild, whereas the created divs should be appeneded with the first div..

元素有这样一个方法:

    function createdivs() {
      var i;
      for (i = 0; i < 10; i++) {
        divc = "<div>.container.content-rows";
        var divc = document.createElement("div");
        divc.classList.add("container");
        divc.classList.add("content-rows");
        divc.classList.add("proglist");
        divc.textContent = "I'm div #" + i;
        document.getElementById('contentdisplay').appendChild(divc);
        createNestedDivs(divc);
      }
    }

    function createNestedDivs(selector) {
      function appendToNode(node, content) {
        // ideally content would also be a Node, but for simplicity, 
        // I'm assuming it's a string. 
        var inner = document.createElement('span');
        inner.textContent = content;
        node.appendChild(inner);
      }

      if (selector instanceof Node) {
        appendToNode(selector, "inner");
        return;
      }

      var selected = Array.prototype.slice.call(document.querySelectorAll(selector));
      selected.forEach(function(el) {
        appendToNode(el, "inner");
      });
    }
<div class="container content-rows" id="contentdisplay">
  <div class="col-md-1" id="snocontent">abcd</div>
  <div class="col-md-3" id="pgnamecontent">abcd</div>
  <div class="col-md-3" id="cmpcontent">abcd</div>
  <div class="col-md-2" id="datecontent">abcd</div>
  <div>
    <button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span>
    </button>
    <button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span>
    </button> <span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span>
    <span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span>

  </div>

createNestedDivs() 函数负责处理是否要将另一个子元素附加到每个创建的元素。您可以将 Node 或 string 传递给它，它会按预期方式处理它们。 createNestedDivs() 的工作原理与我对 createdivs() 所做的修改相同。处理 Node 的情况很简单，但是 string 处理不太清楚:

  • Array.prototype.slice.call 是必需的，因为 document.querySelectorAll 返回一个 NodeList，它不是数组，并且我不能在上面使用 Array.prototype.forEach()。

另外，相关阅读这里:http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript

关于javascript - 我需要在其中创建带有嵌套 div 的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30016934/

javascriptdiv34codejqueryhtml

有关javascript - 我需要在其中创建带有嵌套 div 的 div的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  3. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  4. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  5. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  6. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  7. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  8. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  9. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

    我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只

  10. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

随机推荐