原生js创建节点

<template>
  <div>
    <h3>创建节点</h3>
    <h3>
      1创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象；createElement()
    </h3>
    <h3>2 创建一个文本节点，可以传入文本内容createTextNode()</h3>
    <h3>3 也能达到创建节点的效果，直接添加到指定位置 innerHTML()</h3>
    <button @click="addPara1">添加节点1</button>
    <button @click="addPara2">添加节点2</button>
    <button @click="addPara3">添加节点3</button>
    <button @click="addText4">添加输入框</button>
    <button @click="addText5">添加下拉框</button>

    <div id="idName"></div>
    <select name="people" class="people">
      <option value="1">产品</option>
      <option value="2">测试</option>
      <option value="3">开发</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "PdfDown",
  components: {},
  data() {
    return {};
  },
  methods: {
    addPara1() {
      //创建P标签
      var p = document.createElement("p");
      console.log(p);
      //创建文本节点
      var text = document.createTextNode("这是p标签的文本");

      //将文本节点追加到元素节点中
      p.appendChild(text);
      console.log(p);

      //将P标签中内容添加到div中
      var div = document.getElementById("idName");
      div.appendChild(p);
    },
    addPara2() {
      let p = document.createElement("p");
      //用innerHTML方法直接给P标签赋值
      p.innerHTML = "这是p标签的文本222";
      let div = document.getElementById("idName");
      div.appendChild(p);
    },
    addPara3() {
      //只是加内容，没有单独样式标签
      let p = "这是p标签的文本333";
      let div = document.getElementById("idName");
      div.innerHTML += p;
    },
    addText4() {
      let div = document.getElementById("idName");
      let inp = document.createElement("input");
      inp.type = "text";
      inp.value = "没事就多喝水";
      div.appendChild(inp);

      // let div = document.getElementById("container");
      // let inp = "<input type='text' value='有事你就别喝水'>";
      // div.innerHTML+=inp;
      //这种种方法将第一种方法的赋值部分整合，使得P标签成为一个字符串而不是一个节点，所以使用innerHTML方法而不是appendChild方法。这一点需要特别注意
    },
    addText5() {
      debugger;
      let people = document.getElementsByName("people");
      let opt = '<option value="5">从前从前有个人爱你很久</option>';
      // 原生写法可能是people.innerHTML，我这用vue写的不识别需要加数组写法
      people[0].innerHTML += opt;

      //-----------------------------
      //  /*通过name属性获取下拉框对象*/
      //  let people = document.getElementsByName("people")[0];
      // /*创建下拉选项*/
      // let opt = document.createElement("option");
      // //设置文本和值
      // opt.value = "4";
      // opt.text = "debugger";
      // //将option添加到下拉选项中
      // people.appendChild(opt);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss"></style>