Javascript 如何将jquery对象呈现为html-Seing[object]_Javascript_Jquery

Javascript 如何将jquery对象呈现为html-Seing[object]

javascript jquery

Javascript 如何将jquery对象呈现为html-Seing[object],javascript,jquery,Javascript,Jquery,我在将jquery对象呈现为html时遇到问题在下面的代码中，勾选框被呈现为[object object]而不是html，而其余的都被正确呈现我知道我可以把它作为一个字符串添加，但这不是这里的目标为什么勾选框不呈现为html？ const legendData=[“你好，世界”，“欢迎回来”，“加州酒店”，“永不离开”]；常量勾选框=$（''{ 类：'tickBox'， html:$（''）{ 班级：'勾选' }) }); const legendContent=legendData.

我在将jquery对象呈现为html时遇到问题

在下面的代码中，

勾选框

被呈现为

[object object]

而不是html，而其余的都被正确呈现

我知道我可以把它作为一个字符串添加，但这不是这里的目标

为什么

勾选框不呈现为html？


const legendData=[“你好，世界”，“欢迎回来”，“加州酒店”，“永不离开”]；
常量勾选框=$（''{
类：'tickBox'，
html:$（''）{
班级：'勾选'
})
});
const legendContent=legendData.map（项=>{
返回$（“”{
dataId:`${item.split（''[0]}`，
html:`${tickBox}${item}`
/*我知道我能做到*/
//html:`${item}`
});
});
$('', {
id:'图表图例'，
类：“图例”，
标题：“图表图例”，
html:“图例”
}).appendTo（`chartContainer`）；
$（“
”{
类：“图例”，
html:legendContent
}).附录（“#图表图例”）
问题在于，您需要以某种方式将HTML节点序列化为字符串，以便插值正确工作
一种方法是使用相应本机元素的outerHTML
：

const legendData=[“你好，世界”，“欢迎回来”，“加州酒店”，“永不离开”]；
常量勾选框=$（''{
类：'tickBox'，
html:$（''）{
班级：'勾选'
})
});
const legendContent=legendData.map（项=>{
返回$（“”{
dataId:`${item.split（''[0]}`，
html:`${tickBox[0].outerHTML}${item}`
});
});
$('', {
id:'图表图例'，
类：“图例”，
标题：“图表图例”，
html:“图例”
}).appendTo（`chartContainer`）；
$（“
”{
类：“图例”，
html:legendContent
}).附录（“#图表图例”）
问题在于，您需要以某种方式将HTML节点序列化为字符串，以便插值正确工作
一种方法是使用相应本机元素的outerHTML
：

const legendData=[“你好，世界”，“欢迎回来”，“加州酒店”，“永不离开”]；
常量勾选框=$（''{
类：'tickBox'，
html:$（''）{
班级：'勾选'
})
});
const legendContent=legendData.map（项=>{
返回$（“”{
dataId:`${item.split（''[0]}`，
html:`${tickBox[0].outerHTML}${item}`
});
});
$('', {
id:'图表图例'，
类：“图例”，
标题：“图表图例”，
html:“图例”
}).appendTo（`chartContainer`）；
$（“
”{
类：“图例”，
html:legendContent
}).附录（“#图表图例”）


文档说明jQuery（）
函数的参数为PlainObject
PlainObject
接受一个它希望已经是字符串的html
参数。它目前正在将Javascript对象串成字符串，因此[object object]

您应该将其呈现为HTML字符串。

文档说明jQuery（）
函数的参数为PlainObject
PlainObject
接受一个它希望已经是字符串的html
参数。它目前正在将Javascript对象串成字符串，因此[object object]

您应该将其呈现为HTML字符串。
使用tickBox[0]。innerHTML呈现tickBox中的HTML内容

const legendData=[“你好，世界”，“欢迎回来”，“加州酒店”，“永不离开”]；
常量勾选框=$（''{
类：'tickBox'，
html:$（''）{
班级：'勾选'
})
});
const legendContent=legendData.map（项=>{
返回$（“”{
dataId:`${item.split（''[0]}`，
html:`${tickBox[0]。innerHTML}${item}`
/*我知道我能做到*/
//html:`${item}`
});
});
$('', {
id:'图表图例'，
类：“图例”，
标题：“图表图例”，
html:“图例”
}).appendTo（`chartContainer`）；
$（“
”{
类：“图例”，
html:legendContent
}).附录（“#图表图例”）
使用tickBox[0]。innerHTML呈现tickBox中的html内容

const legendData=[“你好，世界”，“欢迎回来”，“加州酒店”，“永不离开”]；
常量勾选框=$（''{
类：'tickBox'，
html:$（''）{
班级：'勾选'
})
});
const legendContent=legendData.map（项=>{
返回$（“”{
dataId:`${item.split（''[0]}`，
html:`${tickBox[0]。innerHTML}${item}`
/*我知道我能做到*/
//html:`${item}`
});
});
$('', {
id:'图表图例'，
类：“图例”，
标题：“图表图例”，
html:“图例”
}).appendTo（`chartContainer`）；
$（“”{
类：“图例”，
html:legendContent
}).附录（“#图表图例”）
您必须使用HTML而不是像这样的对象。您正在使用“将整个对象转换为HTML”选项。你只需要换一行
`${tickBox} ${item}`

到
为了
const legendContent=legendData.map（项=>{
返回$（“”{
dataId:`${item.split（''[0]}`，
html:`${tickBox.wrapAll（''.parent（）.html（）}${item}`
});
});

您必须使用HTML而不是像这样的对象。您正在使用“将整个对象转换为HTML”选项。你只需要换一行
`${tickBox} ${item}`

到
为了
const legendContent=legendData.map（项=>{
返回$（“”{
dataId:`${item.split（''[0]}`，
html:`${tickBox.wrapAll（''.parent（）.html（）}${item}`
});
});

连接勾选框
元素的HTML的替代方法是clone（）
它的一个新实例，并append（）
将其添加到每个legendContent
实体，如下所示：
const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
  }).append(tickBox.clone()).append(item);
});

连接勾选框
元素的HTML的另一种选择是clone（）一个新的
const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
    html: `${tickBox.wrapAll('<div>').parent().html()} ${item}`
  });
});

const legendContent = legendData.map(item => {
  return $('<li/>', {
    dataId: `${item.split(' ')[0]}`,
  }).append(tickBox.clone()).append(item);
});