introjs新手引导页如何更新dom element小知识，大挑战！本文正在参与“程序员必备小知识”创作活动经过一段

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

问题：使用introjs制作新手引导页时，对于新生成的元素如何使已开启的intro引导页获取？（具体来说就是需要引导使用查询功能，但是目前只能定位查询之前存在的页面，但是查询之后的页面定位不到，需要更新后才可以。）

经过一段时间的试错尝试，终于解决了！赶紧前来记录一番。参考的这个issuerefresh should refresh cached elements #328 题外话：用这些库遇到问题的话还是要回归到库所在GitHub的issue呀，可以少走很多弯路。

其实就是在onbeforechange中更新element就可以。

let helpDialog = introJs();
helpDialog.setOptions({
    steps: [
        {
            title: '新手引导页',
            intro: 'Hello World! 👋'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step1'),
            intro: 'This is step1',
            position: 'right'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step2'),
            intro: 'This is step2',
            position: 'right'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step3'),
            intro: 'This is step3',
            position: 'right'
        },
        {
            title: '新手引导页',
            element: document.querySelector('#step4'),
            intro: 'This is step4',
            position: 'right'
        },
    ]
});
helpDialog.onbeforechange(function (targetElement) {
    helpDialog._introItems[3].element = document.querySelector('#step3');
    helpDialog._introItems[3].position = 'right';
    helpDialog._introItems[4].element = document.querySelector('#step4');
    helpDialog._introItems[4].position = 'right';
});
helpDialog.start();

上述代码还更新的position，因为在使用过程中发现会错位，所以可以重新设置一下position。

参考：