JS: 在JS中遍历变量循环生成元素

简介

不光是在HTML中进行元素代码编写，也会在JS中生成元素HTML代码。

具体实现

方式一：获得HTML字符串（应用场景：发送HTML内容的邮件）

// JS中调用方式
console.log(this.getHTMLString())

getHTMLString() {
  const arrs = [ { content: '...1' }, { content: '...2' }, { content: '...3' } ]
  const HTMLString = `
    <div>
      ${arrs.map(arr => {
        return `<span>${arr.content}</span>`
      }).join('')}
    </div>
  `
  return HTMLString
}

方式二：获得HTML（应用场景：elementUI的tree中的render-content）

// JS中调用方式
console.log(this.renderContent())

renderContent() {
  const arrs = [ { content: '...1' }, { content: '...2' }, { content: '...3' } ]
  const templete = (
    <div>
      {arrs.map(arr => { return <div>{arr.content}</div> })}
    </div>
  )
  return templete
}

绑定事件

// JS中调用方式
const newHtml = this.renderContent2()
console.log(newHtml)
newHtml.children[0].data.on.click()

renderContent() {
  const arrs = [
  { content: '...1', isChecked: false },
  { content: '...2', isChecked: false },
  { content: '...3', isChecked: false }
  ]
  const templete = (
    <div>
      { arrs.map(arr => {
        return <div class={arr.isChecked ? 'className1' : 'className2'} onclick={e => this.handleClick(e, arr)}>{arr.content}</div>
      }) }
    </div>
  )
  return templete
},

handleClick(e, data) {
  if (e && e.stopPropagation) e.stopPropagation() // 阻止事件的向上传播
  console.log(e, data)
}

注意

此处举例是基于vue框架，自行根据框架做代码调整。

方式一

1.此处使用了模板字符串 ``；
2.如果img的路径不一定存在，那么就需要筛选，可遍历前筛，也可遍历时筛；
3.arr.map返回的新数组，需要一次join(‘’)，否侧字符串中，元素之间有逗号。

方式二

1.HTML代码是用一对小括号()包含的;
2.需要使用变量处使用中一对大括号包含{}。

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术。