javascript - 通过js添加html标签/语义

Question

所以基本上我有一个带有列表的简单系统，当我选择一个项目时，它会显示描述和绑定(bind)到该项目的图像。

项目:https://jsfiddle.net/jhnjcddh/2/

问题是我需要在 JS 中添加文本，因此如果我想添加任何标签，如 <b></b>; <a href=""></a>或者这样我会把里面的文字放进去:

    map.set(item1, {
  desc: '<a href=''>Hello!</a>',
  ...
});

但是其结果是完整的形式，如下所示:

 <a href=''>Hello!</a>

我尝试将其放入 var并附加:

var text1 = '<a href=''>Hello!</a>'

   map.set(item1, {
  desc: text1,
  ...
});

..但这给出了相同的结果。

代码:

// -----------------START OF STYLING ELEMENT-----------------
var btns = document.getElementsByClassName("item");

for (var i = 0; i < btns.length; i++) {

  btns[i].addEventListener("click", function() {

    var siblings = this.parentNode.childNodes
    siblings.forEach(function(element) {

      if (element.className){  // && element.className.indexOf('active') !== -1) { // TAKIT: Removed, see suggestion below
        if (element.classList.contains('active')) // TAKIT: Suggestion: Easier, and better readability!
          element.classList.remove("active");
      }
    })
    this.classList.add("active"); // TAKIT: Suggestion instead of this.className += " active";
  });
}
// -----------------END OF STYLING ELEMENT-----------------


// -----------------START OF LOGIC ELEMENT-----------------



const map = new Map();
// register item element as a key and object with corresponding description / image as value
map.set(item1, {
  desc: 'text1',
  img: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg'
});
map.set(item2, {
  desc: 'some description item2',
  img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif'
});
map.set(item3, {
  desc: 'some  item3',
  img: 'https://cdn.europosters.eu/image/1300/32201.jpg'
});
map.set(item4, {
  desc: ' description for item4',
  img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png'
});

map.set(item5, {
  desc: 'This item5 is cool',
  img: 'https://c1-zingpopculture.eb-cdn.com.au/merchandising/images/packshots/855db32a4fc24da2ba2ce821edd2a51e_Large.png'
});
map.set(item6, {
  desc: 'item6 displays attitude',
  img: 'https://c1-ebgames.eb-cdn.com.au/merchandising/images/packshots/969932eb9d274a57a59daf9e75319929_Medium.png'
});
map.set(item7, {
  desc: 'amazing item7 just breathtaking',
  img: 'https://images-na.ssl-images-amazon.com/images/I/81GErgo2%2B8L._SY355_.jpg'
});
map.set(item8, {
  desc: ' item8 is an interesting conept',
  img: 'https://cdn.shopify.com/s/files/1/2012/3849/products/4048862.jpg?v=1505815578'
});

// you can bind on click handler for example
const list = document.querySelectorAll('ol'); // TAKIT: Modified to return multiple elements
list.forEach(function() { // TAKIT: Added to manage the multiple elements
  this.addEventListener('click', event => {
    // if element that was registered in our map triggered the event
    if (map.has(event.target)) {
      var wrapper = event.target.closest('.wrapper'); // TAKIT: Get parent wrapper
      // change text of description area
      wrapper.querySelector('.description').textContent = map.get(event.target).desc; // TAKIT: Modified
      // change src of the image
      wrapper.querySelector('img').src = map.get(event.target).img; // TAKIT: Modified
    }
  });
});



// -----------------END OF LOGIC ELEMENT-----------------

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* containers  */

#content-working {
  margin: 20px;
}

* {
  font-family: Corbel;
}

.wrapper {
  border: 1px solid red;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.image,
.description,
.list {
  border: 1px solid #472836;
  box-sizing: border-box;
  margin: 5px;
}


/* list  */

.list {
  width: 150px;
  height: 250px;
  background-color: #9AD2CB;
  overflow-y: auto;
  overflow-x: hidden;
}

.list ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  padding: 5px;
  transition: all .3s ease;
}

.list li:nth-child(even) {
  background-color: #91f2e6;
  width: 100%;
  height: 100%;
}

.list li:hover,
.list .active {
  cursor: pointer;
  color: red;
  padding-left: 25px;
}


/* sub-container */

.image,
.description {
  width: 150px;
  height: 150px;
}

.image {
  background-color: #D7EBBA;
}

.image img {
  width: 100%;
  height: 100%;
}

.description {
  background-color: #FEFFBE;
  overflow-y: auto;
  overflow-x: hidden;
  height: 95px;
}

<div id="content-working">
  <div class="wrapper">
    <div class="list">
      <ol>
        <li id="item1" class="item">items1</li>
        <li id="item2" class="item">items2</li>
        <li id="item3" class="item">items3</li>
        <li id="item4" class="item">items4</li>
      </ol>
    </div>
    <div class="image-container">
      <div class="image">
        <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
      </div>
      <div class="description">
        just a placeholder text for when nothing has been chosen.
      </div>
    </div>
  </div>

  <div class="wrapper">
    <div class="list">
      <ol>
        <li id="item5" class="item">items5</li>
        <li id="item6" class="item">items6</li>
        <li id="item7" class="item">items7</li>
        <li id="item8" class="item">items8</li>
      </ol>
    </div>
    <div class="image-container">
      <div class="image">
        <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
      </div>
      <div class="description">
        just a placeholder text for when nothing has been chosen.
      </div>
    </div>
  </div>
</div>

我在这里做错了什么？为什么这不起作用？

Answer 1

您通过textContent设置所有内容。使用 innerHTML 允许解释标签。

https://jsfiddle.net/pd6o0zfn/ (第7项)