Question

我想通过javascript更改div的内容，但不仅仅是一个paragraph.suppose如果我有三到四个段落，文本字段应该不断变化，有效。我已经写了这段代码，但它只改变了一个段落。它没有再改变。如果它被描绘成字母下降而内容在下一个字母中也会很好。请帮助

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
    </head>

    <script>
      function myFunction() {
        document.getElementById("paraone").innerHTML="<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
      }
    </script>

    <style>
      body {
        background: linear-gradient(#ccc, #fff);
        font: 14px sans-serif;
        padding: 20px;
      }
      .letter {
        background: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        margin: 26px auto 0;
        max-width: 550px;
        min-height: 300px;
        padding: 24px;
        position: relative;
        width:100%;
      }
      .letter:before, .letter:after {
        content: "";
        height: 98%;
        position: absolute;
        width: 100%;
        z-index: -1;
      }
      .letter:before {
        background: #fafafa;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        left: -5px;
        top: 4px;
        transform: rotate(-2.5deg);
      }
      .letter:after {
        background: #f6f6f6;
        box-shadow: 0 0 3px rgba(0,0,0,0.2);
        right: -3px;
        top: 1px;
        transform: rotate(1.4deg);
      }
    </style>
    <body>

      <button type="button" onClick="myFunction()">Click</button>
      <div class="letter">

        <p>Dear Friends,</p>
        <p id="paraone">Lorem ipsum dolor sit amet, consectetur adipiscing     elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui,onvallis est pretium.</p>
     </div>

  </body>
</html>

Answer 1

您的问题尚不清楚 - 但我认为您的目标是追加文字，而不是替换。

document.getElementById("paraone").innerHTML = document.getElementById("paraone").innerHTML + "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";

这会将元素的innerHTML设置为＆＃34;元素的内部HTML，AND <marquee behavior='scroll' direction='left'>Hello World!</marquee>。它几乎说，＆＃34;将它设置为目前的状态，PLUS .....＆＃34;。

http://jsfiddle.net/daveSalomon/756yxaqh/

这种方法并不理想 - 例如，每次添加新内容时，都会重置选框，因为元素的整个内容都会被替换。更好的方法是在div中插入新元素。

var p = document.createElement("p");
p.innerHTML = "<marquee behavior='scroll' direction='left'>Hello World!</marquee>";
document.getElementById("paraone").appendChild(p);

http://jsfiddle.net/daveSalomon/756yxaqh/1/

顺便说一句，如果您刚开始使用JavaScript，则值得了解jQuery。第二个代码段可以写成：

$('#paraone').append('<marquee behaviour="scroll" direction="left">Hello World!</marquee>');

使用javascript

1 个答案: