Javascript 使2个文本值显示在1个列表项中

好的，我很难在同一列表项中显示两个文本值（一个

，一个

），这可能吗

我正在尝试创建一个简单的日记/日志应用程序，您可以在其中添加标题（可选）和帖子条目本身的内容，按submit并让它创建一个显示内容的列表项

HTML:

---

演示：（忽略角度登录内容）

我很确定这就是您要找的，我稍微修改了以

textNode

开头的行，还为

titleText

添加了额外的变量。然后继续按原样编写其余的代码

function addLi(targetUl){
  var inputText = document.getElementById('entry').value,
      titleText =  document.getElementById('title').value,
      li = document.createElement('li'),
      textNode = document.createTextNode(titleText + ' - ' + inputText + ''),
      removeButton = document.createElement('button');

---

您只需访问表单值，然后将它们连接起来

；（功能（）{
“严格使用”；
var form=document.getElementById（'f'）；
var title=document.getElementById（'title'）；
var body=document.getElementById（'body'）；
var targetUl=document.getElementById（'posts'）；
btn.addEventListener（'click'，函数（ev）{
var newli=document.createElement（'li'）；
newli.innerText=title.value+'&&'+body.value；
目标儿童（newli）；
});
})();
表单{
位置：相对位置；
}
标签、输入、文本区域、按钮{
浮动：左；
}
标签{
清除：左；
}
输入，文本区{
清楚:对,；
}
按钮，ul，hr{
明确：两者皆有；
}
标签{
宽度：100px；
}

标题
身体
添加到列表中

以下是一些javascript


//js添加文本条目
var ul=document.getElementById（'list'），
removeAll=document.getElementById（'removeAll'），
add=document.getElementById（'add'）；
//在单击“提交”时使事情发生
add.onclick=function（）{
阿德利（ul）；
文件.getElementById（“标题”）；
};
//用于添加项目的函数
功能地址（targetUl）{
var inputText=document.getElementById（'entry'）。值，
header=document.getElementById（'title'）。值，
li=document.createElement（'li'），
content=document.createElement（'div'），
title=document.createElement（'div'），
//textNode=document.createTextNode（inputText+''+），
removeButton=document.createElement（'button'）；
setAttribute（'class'，'content'）
title.setAttribute（'class'，'title'）
content.innerHTML=inputText；
title.innerHTML=标题；
if（inputText.split（“”）.join（“”）.length==0）{
//检查是否有空输入
警报（“无输入”）；
返回false；
}
removeButton.className='removeMe'；//为CSS的按钮添加类
removeButton.innerHTML='Remove'；//向Remove按钮添加文本
setAttribute（'onclick'，'removeMe（this）；'）；
李.儿童（头衔）；
li.儿童（内容）；
li.appendChild（移除按钮）；
目标儿童（li）；
}
//函数删除条目
功能移除（项目）{
var parent=item.parentElement；
parent.parentElement.removeChild（父级）；
}
removeAll.onclick=函数（）{
ul.innerHTML=''；
};
正文{
保证金：0；
}
*{
字体系列：Gotham Book、Arial、Helvetica、无衬线字体；
}
#导航栏{
背景色：#f1f1；
文本对齐：居中；
}
#导航设备{
保证金：0自动；
}
#navbaritems ul{
填充：0；
宽度：100%；
列表样式类型：无；
保证金：0；
显示：内联；
位置：相对位置；
字号：0；
}
#navbaritems ul li{
显示：内联块；
空白：nowrap；
文本对齐：居中；
颜色：#000；
位置：相对位置；
}
#navbaritems ul li ul{
宽度：100%；
填充：0；
位置：绝对位置；
顶部：6vh；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
显示：无；
不透明度：0；
可见性：隐藏；
文本对齐：居中；
-webkit transiton：不透明度0.2s；
-moz转变：不透明度0.2s；
-ms转换：不透明度0.2s；
-o-转变：不透明度0.2s；
-过渡：不透明度0.2s；
}
#navbaritems ul li ul li{
背景色：#f1f1；
显示：块；
}
#navbaritems ul li：悬停ul{
显示：块；
不透明度：1；
能见度：可见；
}
#navbaritems ul li：悬停{
-o-转变：1s；
-ms转换：1s；
-moz跃迁：1s；
-webkit转换：1s；
过渡：1s；
宽度：22%；
}
#navbaritems ul li ul li:悬停{
-o-转变：1s；
-ms转换：1s；
-moz跃迁：1s；
-webkit转换：1s；
过渡：1s；
宽度：100%；
}
#navbaritems ul li a{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
字体大小：1vw；
显示：块；
高度：4vh；
线路高度：4vh；
颜色：#808080；
文字装饰：无；
填充：1vh；
保证金：0；
}
#navbaritems ul li a:悬停：未（.active）{
背景色：#82c986；
颜色：#ffffff；
-o-转变：.3s；
-ms转换：.3s；
-moz跃迁：.3s；
-webkit转换：.3s；
过渡：.3s；
光标：指针；
显示：块；
}
#navbaritems ul li a.主动{
颜色：#ffffff；
背景色：#4CAF50；
}
.头衔{
显示：内联块；
颜色：蓝色；
字体大小：粗体；
文字装饰：下划线；
}
WriteUp
开始写



提交
全部删除


//js to add text entries
var ul = document.getElementById('list'),
    removeAll = document.getElementById('removeAll'),
    add = document.getElementById('add');

//make something happen when clicking on 'submit'
add.onclick = function(){
  addLi(ul);
  document.getElementById("titleHead");
};

//function for adding items
function addLi(targetUl){
  var inputText = document.getElementById('entry').value,
      li = document.createElement('li'),
      textNode = document.createTextNode(inputText + ''),
      removeButton = document.createElement('button');

  if (inputText.split(' ').join(' ').length === 0) {
    //check for empty inputs
    alert ('No input');
    return false;
  }


  removeButton.className = 'removeMe'; //add class to button for CSS
  removeButton.innerHTML = 'Remove'; //add text to the remove button
  removeButton.setAttribute('onclick', 'removeMe(this);'); 

  li.appendChild(textNode); 
  li.appendChild(removeButton);

  targetUl.appendChild(li);
}

//function to remove entries
function removeMe(item){
  var parent = item.parentElement;
  parent.parentElement.removeChild(parent);
}

removeAll.onclick = function(){
  ul.innerHTML = '';
};

function addLi(targetUl){
  var inputText = document.getElementById('entry').value,
      titleText =  document.getElementById('title').value,
      li = document.createElement('li'),
      textNode = document.createTextNode(titleText + ' - ' + inputText + ''),
      removeButton = document.createElement('button');